<style type="text/css">
    .hide {
        display: none;
    }
</style>

<div class="body-content position-rel bg-gradient overflow-h">
        <div class="section-thumb d-none d-sm-block">
            <img src="<?php echo base_url();?>files/assets/images/shape/package-bg.png" alt="thumb" style="object-fit: contain; height: auto;">
        </div>
        <div class="section-thumb d-sm-none">
            <img src="<?php echo base_url();?>files/assets/images/shape/package-bg-mobile.png" alt="thumb" style="object-fit: contain; height: auto;">
        </div>
        <div class="section-thumb-bottom d-sm-none">
            <img src="<?php echo base_url();?>files/assets/images/shape/body-bottom.png" alt="thumb" style="object-fit: contain; height: auto;">
        </div>
        <div class="show--wrapper-area">
        <div class="shop-wrapper header-title-mt-two">

               <?php $this->load->view('template/message.php');?>
            
            <div class="row justify-content-center gy-3 gy-sm-4">
                 <?php 
                    if(count($purchase_list) > 0){
                            foreach($purchase_list as $key => $val){
                    ?>
                <div class="col-xl-4 col-lg-6">
                    <div class="package-item package-item-0">
                        <div class="package-item__thumb">
                            <img src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $val["package"];?>" class="img-package" alt="thumb">
                            <?php 
                        if($val['type'] == 1)
                        {
                        ?>
                            <span class="base text-white ">Unlimited</span>
                        <?php }
                        else
                        {
                            ?>
                            <span class="base text-white ">Limited</span>
                            <?php
                        }
                        ?>
                        </div>
                        <div class="package-item__content">
                            <h4 class="title mb-sm-1"><?php echo $val['title'];?></h4>
                            <ul class="py-2 py-sm-3 video-photo">


                                       <?php 
                                        if($val['type'] == 1){
                                            ?>
                                            <li><span class="pe-2 pe-sm-3"><i class="fas fa-video"></i></span> Unlimited Videos</li>
                                            <li><span class="pe-2 pe-sm-3"><i class="fas fa-image"></i></span> Unlimited Photo</li>
                                            <?php
                                        }else if($val['title'] == 0){
                                            ?>
                                            <li><span class="pe-2 pe-sm-3"><i class="fas fa-video"></i></span> <?=$val['video']?> Videos</li>
                                            <li><span class="pe-2 pe-sm-3"><i class="fas fa-image"></i></span> <?=$val['image']?> Photo</li>
                                            <li><span class="pe-2 pe-sm-3"><i class="fas fa-image"></i></span> <?=$val['image']?> Photo</li>
                                            <?php
                                        }
                                    ?>


                                
                            </ul>
                            <h4 class="text--three">
                                <?php 
                                if($val['discount'] != 0)
                                {
                                    $discount_price = $val['price'] * $val['discount'] / 100;
                                    ?>

                                    <span style="text-decoration: line-through; color: #777777 !important;"><?php echo $val['symbol'];?><?php echo $val['price'];?></span> <?php echo $val['symbol'];?><?php echo ($val['price'] - $discount_price);?>

                                    <?php
                                }
                                else
                                {
                                    ?>
                                    <?php echo $val['symbol'];?><?php echo $val['price'];?>
                                    <?php    
                                }
                                ?>

                                

                            </h4>
                            <a href="javascript:void(0)" id="<?=$val['id']?>" class="cmn--btn d-block text-center d-sm-none cmn-btn-package get-package-date" data-bs-target="#package-modal" data-bs-toggle="modal">Buy</a>
                        </div>
                        <a href="javascript:void(0)" id="<?=$val['id']?>" class="cmn--btn d-block text-center d-none d-sm-block get-package-date" data-bs-target="#package-modal" data-bs-toggle="modal">Buy Now</a>
                    </div>
                </div>
            <?php }
                }
            ?>
               
            </div>
        </div>
        </div>
    </div>



<div class="modal fade" id="package-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0 get-package-modal">
            </div>
        </div>
    </div>
</div>


   <div class="modal fade" id="popup-wrapper" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body p-0">
                    <div class="popup-wrapper share-modal payment-padding-wrapper" style="overflow-y: auto; height: 100%;">
                        <div class="payment-wrapper">

                         <form role="form" action="<?php echo base_url('PurchaseController/purchase'); ?>" method="post" class="form-validation" data-cc-on-file="false" data-stripe-publishable-key="<?php echo $this->config->item('stripe_key') ?>" id="payment-form">

                            <div class="row gx-3 gy-2 gy-sm-3">

                                <div class="col-12">
                                    <div class="form-group position-relative">
                                        <label for="" class="form-label">Name on Card</label>
                                        <input type="text" class="form-control form--control" size='4' placeholder="Name on Card">
                                    </div>
                                </div>


                                <div class="col-12">
                                    <div class="form-group position-relative">
                                        <label for="" class="form-label">Card Number</label>
                                        <input type="text" class="form-control form--control card-number" placeholder="1234 1234 1234 1234">
                                        <img src="<?php echo base_url();?>files/assets/images/icon/payment-list.png" alt="icon" class="payment-list">
                                    </div>
                                </div>



                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="" class="form-label">CVC</label>
                                        <input type="text" class="form-control form--control card-cvc" placeholder="ex. 311" size="4">
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="" class="form-label">Expiration Month </label>
                                        <input type="text" class="form-control form--control card-expiry-month" placeholder="MM">
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="" class="form-label">Expiration Year </label>
                                        <input type="text" class="form-control form--control card-expiry-year" placeholder="YYYY">
                                    </div>
                                </div>


                                    <div class='form-row row'>
                                        <div class='col-md-12 error form-group hide' style="margin-top: 10px;">
                                            <div class='alert-danger alert'>Error occured.</div>
                                        </div>
                                    </div>


                                    <input class='price' name="price" id="getPrice" value="<?php echo $_GET['price'] ?>" type='hidden'>
                                    <input class='usd_price' name="usd_price" id="getUSDPrice" value="<?php echo $_GET['usd_price'] ?>" type='hidden'>
                                    <input name="package_id" id="getPackageID" value="<?php echo $_GET['package_id'] ?>" type='hidden'>
                                    <input name="guest_id" id="getGuestID" value="<?php echo $_GET['guest_id'] ?>" type='hidden'>
                                    <input class="from_date" id="getFormDate" name="from_date" value="<?php echo $_GET['from_date'] ?>" type='hidden'>
                                   
                                
                                <div class="col-sm-6 order-last">
                                    <button class="cmn--btn active px-2 d-block w-100" data-bs-dismiss="modal">Cancel</button>
                                </div>
                                <div class="col-sm-6 ">

                                    <button class="cmn--btn px-2 d-block w-100" type="submit">Pay (<span id="getPriceHTML"></span>)</button>

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


<script src="<?php echo base_url();?>files/assets/js/lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
    $('body').delegate('.get-package-date', 'click', function() {
        var id = $(this).attr('id');
        $.ajax({
            url: "<?=base_url()?>PurchaseController/getPurchaseDate",
            type: "POST",
            data:{
               id:id,
            },
            dataType:"json",
            success:function(response) {
                $('.get-package-modal').html(response.html);
            },
        });
    })


     function continue_func(package_id, price, currency_rate, validity)
     {
                var shtml = '';
                var activate_date = $("#activate_date"+package_id+"").val();
                console.log(activate_date);
                var usd_price = price * currency_rate;
                
                var today = new Date();
                var yyyy = today.getFullYear();
                var mm = today.getMonth() + 1;
                var dd = today.getDate();
                
                if(mm < 10)
                    mm = '0'+mm;
                if(dd < 10)
                    dd = '0'+dd;
                    
                var current_date = yyyy+'-'+mm+'-'+dd;
                
                if(activate_date >= current_date) {
                    $('#popup-wrapper').modal('show');
                    $('#package-modal').modal('hide');

                    $('#getPrice').val(price);
                    $('#getUSDPrice').val(usd_price);
                    $('#getPackageID').val(package_id);
                    $('#getGuestID').val(<?php echo $userdata["id"]?>);
                    $('#getFormDate').val(activate_date);
                    $('#getPriceHTML').html(price);
                    
                    
                    
                    

                    // document.location.href = "<?php echo base_url();?>payment-gateway?guest_id=" + '<?php echo $userdata["id"]?>' + "&package_id=" + package_id + "&from_date=" + activate_date + "&validity=" + validity + "&price=" + price + "&usd_price=" + usd_price;
                }
                else
                {
                    alert('Activate Date is incorrect.');
                }
    }


    $(function () {
        var $stripePg = $(".form-validation");
        $('form.form-validation').bind('submit', function (e) {
            var $stripePg = $(".form-validation"),
                inputSelector = ['input[type=email]', 'input[type=password]',
                    'input[type=text]', 'input[type=file]',
                    'textarea'
                ].join(', '),
                $inputs = $stripePg.find('.required').find(inputSelector),
                $errorMessage = $stripePg.find('div.error'),
                valid = true;
            $errorMessage.addClass('hide');

            $('.has-error').removeClass('has-error');
            $inputs.each(function (i, el) {
                var $input = $(el);
                if ($input.val() === '') {
                    $input.parent().addClass('has-error');
                    $errorMessage.removeClass('hide');
                    e.preventDefault();
                }
            });

            if (!$stripePg.data('cc-on-file')) {
                e.preventDefault();
                Stripe.setPublishableKey($stripePg.data('stripe-publishable-key'));
                Stripe.createToken({
                    number: $('.card-number').val(),
                    cvc: $('.card-cvc').val(),
                    exp_month: $('.card-expiry-month').val(),
                    exp_year: $('.card-expiry-year').val()
                }, handleStripePayment);
            }

        });

        function handleStripePayment(status, res) {
            if (res.error) {
                $('.error')
                    .removeClass('hide')
                    .find('.alert')
                    .text(res.error.message);
            } else {
                var token = res['id'];
                $stripePg.find('input[type=text]').empty();
                $stripePg.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                $stripePg.get(0).submit();
            }
        }

    });
</script>