
<?php include('header.php')?>
<!-- build:css -->
<link rel="stylesheet" href="<?php echo base_url()?>assets/stripe/css/main.css">
<!-- endbuild -->

<link rel="stylesheet" href="<?php echo base_url()?>assets/stripe/css/theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<style>
    .modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
}

.modal-content {
  background-color: #fff; /* White background for modal content */
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
      text-align: end;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.card{
    border:none !important;
    height:100%;
}
.row .mx-auto{
    padding:0px;
}
.list-group-item{
    background:transparent;
    border:none;
    border-top:1px solid rgb(255 255 255 / 65%);
}
</style>
<style>
    .checkoutbox {
  width: fit-content;
  height: fit-content;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 26px;
  max-width: 450px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0px;
}

.payment--options {
  width: calc(100% - 60px);
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  gap: 20px;
  padding: 10px;
}

.payment--options button {
  height: 50px;
  background: #F2F2F2;
  border-radius: 11px;
  padding: 0;
  border: 0;
  outline: none;
}

.payment--options button svg {
  height: 18px;
}

.payment--options button:last-child svg {
  height: 22px;
}

.separator {
  width: calc(100% - 20px);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
  color: #8B8E98;
  margin: 0 10px;
}

.separator > p {
  word-break: keep-all;
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  margin: auto;
}

.separator .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #e8e8e8;
  margin: auto;
}

.credit-card-info--form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input_container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.split {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  gap: 15px;
}

.split input {
  width: 100%;
}

.input_label {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}

.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 16px;
  border-radius: 9px;
  outline: none;
  background-color: #F2F2F2;
  border: 1px solid #e5e5e500;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.purchase--btn {
  height: 55px;
  background: #F2F2F2;
  border-radius: 11px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  background: #1d597c;
  box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px #000000;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.purchase--btn:hover {
  box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #0000003a;
}

/* Reset input number styles */
.input_field::-webkit-outer-spin-button,
.input_field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input_field[type=number] {
  -moz-appearance: textfield;
}
.plan_list li{
    margin-bottom:1.5px;
}
@media (max-width: 767px) {
    .row{
        flex-direction:column-reverse;
    }
}


.home--btn {
  height: 55px;
  background: #F2F2F2;
  border-radius: 11px;
  border: 1px solid white;
  outline: none;
  color: white;
  font-size: 22px;
  font-weight: 700;
  background: white;
  background: #1d597c;
  box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px #000000;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.home--btn:hover {
box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px #000000;
}

</style>


<!-- Page Sidebar Ends-->
<div class="dashboard-main-body mx-5">
        
<?php
$session = \Config\Services::session();
$db = \Config\Database::connect();
$request = service('request');
$stripe = config('Stripe'); 
?>


<?php

               $session->set('vid', $session->get('id'));
               $session->set('plan', '');
               $session->set('planamount', '10');
               $session->set('pid', '');
               $session->set('planid', '');
               
           $session->set('paddress', $request->getPost('paddress'));
$session->set('applicants', $request->getPost('applicants'));
$session->set('adults', $request->getPost('adults'));
$session->set('fees', $request->getPost('fees'));

               $session->set('emailid', $request->getPost('emailid'));

?>

<div class="container-fluid">

		<div class=" py-3 " style="display: flex; justify-content: center;">
			<div class="row shadow" style="background:#fff;border-radius: 23px;border:2px solid #1d597c;  ">
			    	<div class="col-12 col-sm-8 col-md-6 mx-auto">
    <div id="pay-invoice" class="" style="border-radius: 20px;height: 100%;">
        <div class="card-body" style="background:#1d597c;border-radius:20px;padding: 20px 10px;height: 100%; background-image: url(<?php echo base_url()?>assets/assets/media/service-bg-pattern.png);    background-position: top;    background-repeat: no-repeat;">
            <div class="card-title " style="">
                <h6 class="text-center text-white" style="text-align: center; color: white;">Payment For Lease</h6>
            </div>
    
           <div style="text-align:center"> <a href="<?php echo base_url()?>home/leasedocuments"><button class="home--btn px-3" style="cursor:pointer">Return</button></a></div>
            
        </div>
    </div>
</div>

			    
				<div class="col-12 col-sm-8 col-md-6 mx-auto">
                    <noscript>
                        <div class="bs-callout bs-callout-danger">
                            <h4>JavaScript is not enabled!</h4>
                            <p>This payment form requires your browser to have JavaScript enabled. Please activate JavaScript and reload this page. Check <a href="http://enable-javascript.com" target="_blank">enable-javascript.com</a> for more informations.</p>
                        </div>
                    </noscript>
                    <!--<div class="alert alert-danger alert-dismissible display-hide d-none">-->
                    <!--    <button type="button" class="close" data-dismiss="alert">&times;</button>-->
                    <!--    <span id="errorMsg"></span>-->
                    <!--</div>-->
                    <!--<div class="alert alert-success alert-dismissible display-hide d-none">-->
                    <!--    <button type="button" class="close" data-dismiss="alert">&times;</button>-->
                    <!--    <span id="successMsg"></span>-->
                    <!--</div>-->

					<div  id="pay-invoice" class=" " style="padding:1.25rem;border-radius: 20px !important;">
					    <div class="card-title">
								<h6 class="text-center">Paying Texas Properties</h6>
							</div>
							<hr class="m-0">
<form action="" class="form needs-validation" method="post" novalidate="novalidate" data-stripe-publishable-key="<?= esc($stripe->publishableKey) ?>">
    <div class="payment--options">
        <button name="paypal" type="button">
            <i class="text-muted fa fa-cc-visa fa-2x"></i>
        </button>
        <button name="apple-pay" type="button">
            <i class="fa fa-cc-mastercard fa-2x"></i>
        </button>
        <button name="google-pay" type="button">
            <i class="fa fa-cc-amex fa-2x"></i>
        </button>
        <button name="google-pay" type="button">
            <i class="fa fa-cc-discover fa-2x"></i>
        </button>
    </div>
    <div class="form-group d-inline text-center">
        <label>Payment Amount ($)</label>
        <!--<h2>$10</h2>-->
        <input class="form-control cc-amount valid input_field mx-auto text-center" type="number" name="amount" value="<?=$request->getPost('fees')?>">
    </div>
    <div class="credit-card-info--form">
        <div class="input_container">
            <label for="cc-name" class="input_label">Name On Card</label>
            <input id="cc-name" name="cc-name" type="text" class="form-control cc-name valid input_field" placeholder="Enter Name on Card" required>
            <div class="invalid-feedback">Please enter the name on card</div>
        </div>
        <div class="input_container">
            <label for="cc-number" class="input_label">Card Number</label>
            <input id="cc-number" name="cc-number" type="tel" class="form-control cc-number identified visa number input_field" placeholder="0000 0000 0000 0000" maxlength="19" value="" required>
            <div class="invalid-feedback">Please enter the card number</div>
        </div>
        <div class="input_container">
            <label class="input_label">Expiry Date / CVV</label>
            <div class="split">
                <div>
                <input id="cc-month" name="cc-month" type="tel" class="form-control cc-month number input_field" value="" placeholder="MM" maxlength="2" required>
                <div class="invalid-feedback">Please enter the exp. month</div>
                </div>
                <div>
                <input id="cc-year" name="cc-year" type="tel" class="form-control cc-year number input_field" value="" placeholder="YYYY" maxlength="4" required>
                <div class="invalid-feedback">Please enter the exp. year</div>
                </div>
                <div class="input-group">
                    <input id="x_card_code" name="x_card_code" type="tel" class="form-control cc-cvc number input_field" placeholder="CVV" maxlength="4" required>
                    <div class="input-group-append">
                        <span class="input-group-text" style="padding: .675rem .75rem;"><span class="fa fa-question-circle fa-lg" data-toggle="popover" data-container="body" data-html="true" data-title="Security Code"
                                data-content="<div class='text-center one-card'>The 3 digit code on back of the card..<div class='visa-mc-cvc-preview'></div></div>"
                                data-trigger="hover"></span></span>
                                
                                
                    </div>
                    <div class="invalid-feedback">Please enter the security code</div>
                </div>
            </div>
        </div>
        <div class="input_container">
            <?php if($request->getPost('plan')=='Essential'){ } else{?>
            <div class="form-row" style="margin-top:2%">
                <div class="col-12">
                    <label class="form-check form-check-custom form-check-solid form-check-inline">
                        <input class="form-check-input" type="checkbox" name="toc" value="1">
                        <span class="form-check-label fw-semibold text-gray-700 fs-6">I Agree to the
                            <a href="#" id="openModalBtn" data-bs-toggle="modal" data-bs-target="#kt_modal_upgrade_plan" class="ms-1 link-primary">Terms and conditions</a>.</span>
                    </label>
                </div>
            </div>
            <?php } ?>
        </div>
    </div>

    <button id="payment-button" type="submit" class="purchase--btn text-center">
        <i class="fa fa-lock fa-lg"></i>&nbsp;
        <span id="payment-button-amount">Pay <?=$request->getPost('fees')?>$</span>
        <span id="payment-button-sending" style="display:none;">Sending…</span>
    </button>
</form>

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

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Terms and Conditions go here...</p>
  </div>
</div>
</div>


<!-- build:js -->
<script src="<?php echo base_url()?>assets/stripe/js/main.js"></script>
<!-- endbuild -->

<script src="<?php echo base_url()?>assets/stripe/js/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script>
(function() {
    'use strict';

    // Set your publishable key
    Stripe.setPublishableKey('pk_live_51QVKTGK1RTOyp8c3JjIHKV89YvVgv1Y680vo1czB2NJQ1XUeboKCA7a1t7QNkVSNBkJgrESFGUjYW2vs8yaUTryT00fx2J4OVj');

    $('[data-toggle="popover"]').popover()

    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');

        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                } else {
                    event.preventDefault();

                    $.blockUI({
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }
                    });

                    // createToken returns immediately - the supplied callback submits the form if there are no errors
                    Stripe.card.createToken({
                        number: $('.cc-number').val(),
                        cvc: $('.cc-cvc').val(),
                        exp_month: $('.cc-month').val(),
                        exp_year: $('.cc-year').val(),
                        name: $('.cc-name').val(),
                    }, stripeResponseHandler);

                    return false; // submit from callback
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

function stripeResponseHandler(status, response) {
    console.log("Stripe Response Status:", status);
    console.log("Stripe Response:", response);

    var stripeError = $('.alert-danger');
    var stripeSuccess = $('.alert-success');
    var appFilePath = "<?php echo base_url(); ?>";


    if (response.error) {
        stripeError.show().delay(3000).fadeOut();
        $('#errorMsg').text(response.error.message);
        $.unblockUI();
    } else {
        var token = response['id'];
        var stripeForm = $('.needs-validation');
        var dataPost = stripeForm.serializeArray();
        dataPost.push({ name: "stripeToken", value: token });

        console.log("Data to Post:", dataPost);

        $.post(appFilePath + "home/stripePost", dataPost, function(response) {
            console.log("Post Response:", response);

            $.unblockUI();

            if (response.success) {
                stripeForm[0].reset();
                stripeSuccess.show().delay(3000).fadeOut();
                $('#successMsg').text(response.message);

                // Redirect to success page after showing success message
                setTimeout(function() {
                    window.location.href = '<?php echo site_url("home/success"); ?>';
                }, 2000);
            } else {
                stripeError.show().delay(3000).fadeOut();
                $('#errorMsg').text(response.message);
            }
        }, "json").fail(function(xhr, textStatus, errorThrown) {
            console.error("AJAX Request Failed:", textStatus, errorThrown);
            $.unblockUI();
        });
    }
}


// only numbers are allowed
$(".number").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow: Ctrl+v, Command+V
        (e.keyCode == 118 && (e.ctrlKey === true || e.metaKey === true)) ||

        // Allow: Ctrl+V, Command+V
        (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) ||

        // Allow: Ctrl+A, Command+V
        ((e.keyCode == 65 || e.keyCode == 97 || e.keyCode == 103 || e.keyCode == 99 || e.keyCode == 88 || e.keyCode == 120) && (e.ctrlKey === true || e.metaKey === true)) ||

        // Allow: home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});
</script>
<script>
var modal = document.getElementById("modal");

var btn = document.getElementById("openModalBtn");

btn.onclick = function() {
  modal.style.display = "block";
}

var closeButtons = document.querySelectorAll(".close");
closeButtons.forEach(function(button) {
  button.onclick = function() {
    modal.style.display = "none";
  }
});


window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


</script>

<?php include('footer.php')?>