<?php $profile_id = $this->session->userdata('profile_id'); ?>
<div class="col-sm-8">
    <div class="row ">
        <div class="form-group col-sm-12 ">
            <div class="form-group col-sm-12 ">
                <h3>Pay Payment</h3><hr>
            </div>
        </div>
        <form  id="formID2" action="#" method="post" name="userForm" enctype="multipart/form-data" >
            <div class="form-group col-sm-12">
                <div class="form-group col-sm-6">
                    <input readonly type="text" id="invoice_no" name="invoice_no"  class="form-control" placeholder="Invoice no.">
                </div>
                <div class="form-group col-sm-6">
                    <input readonly type="text" id="unit_price" name="unit_price"  class="form-control" placeholder="Unit Price">
                </div>
            </div>
            <div class="form-group col-sm-12">
                <div class="form-group col-sm-6">
                    <input readonly type="text" id="quantity" name="Quantity"  class="form-control" placeholder="Quantity">
                </div>
                <div class="form-group col-sm-6">
                    <input readonly type="text" id="total_price" name="total_price"  class="form-control" placeholder="Total Price">
                </div>
            </div>
            <div class="form-group col-sm-12">
                <div class="form-group col-sm-6">
                    <input readonly type="text" id="discount_price" name="discount_price"  class="form-control" placeholder="Discount price">
                </div>
                <div class="form-group col-sm-6">
                    <input readonly type="text" id="payment_name" name="payment_name"  class="form-control" placeholder="Payment name">
                </div>
            </div>
            <div class="form-group col-sm-12">

                <div class="form-group col-sm-6" >
                    <select class="form-control" onchange="ChangeButton(this.value)">
                        <option value=""> Select Payment Method </option>
                        <option value="2"> Credit Card Payment</option>
                        <option value="4"> Bkash Payment</option>
                        <option value="5"> Paypal Payment</option>
                    </select>
                </div>
                <script>
                    function ChangeButton(GivenText) {

                        var pymentBtn = document.getElementById('pymentBtn');
                        var CreditBtn = document.getElementById('CreditBtn');
                        var BkashBtn = document.getElementById('BkashBtn');
                        var PaypalBtn = document.getElementById('PaypalBtn');

                        if (GivenText == 2)
                        {
                            CreditBtn.setAttribute("style", 'display:block; ');

                            pymentBtn.setAttribute("style", 'display:none; ');

                            BkashBtn.setAttribute("style", 'display:none; ');

                            PaypalBtn.setAttribute("style", 'display:none; ');

                        } else if (GivenText == 4)
                        {
                            BkashBtn.setAttribute("style", 'display:block; ');

                            pymentBtn.setAttribute("style", 'display:none; ');

                            CreditBtn.setAttribute("style", 'display:none; ');

                            PaypalBtn.setAttribute("style", 'display:none; ');

                        } else if (GivenText == 5)
                        {
                            PaypalBtn.setAttribute("style", 'display:block; ');

                            BkashBtn.setAttribute("style", 'display:none; ');

                            pymentBtn.setAttribute("style", 'display:none; ');

                            CreditBtn.setAttribute("style", 'display:none; ');

                        } else
                        {
                            pymentBtn.setAttribute("style", 'display:block; ');
                            pymentBtn.setAttribute("style", 'font-size:14px; ');
                            CreditBtn.setAttribute("style", 'display:none; ');
                            BkashBtn.setAttribute("style", 'display:none; ');
                            PaypalBtn.setAttribute("style", 'display:none; ');
                        }


                    }
                </script>
                <div class="form-group col-sm-6">
                    <button type="button" class="btn btn-success" style="font-size: 12px;display: block" id="pymentBtn">Choose Payment Method</button>
                    <button type="button" class="btn btn-success" style="font-size: 14px;display: none" id="CreditBtn" data-toggle="modal" data-target="#basicModal">Credit Card Payment</button>
                    <button type="button" class="btn btn-success" style="font-size: 14px;display: none" id="BkashBtn" data-toggle="modal" data-target="#bkashModal">Bkash Payment</button>
                    <button type="button" class="btn btn-success" style="font-size: 14px;display: none" id="PaypalBtn" data-toggle="modal" data-target="#PaypalModal">Paypal Payment</button>
                </div>


            </div>



            <div class="form-group col-sm-12">

                <div class="form-group col-sm-6">

                    <div class='input-group' id='datetimepicker2'>
                        <input type='text' class="form-control" placeholder=" Due Payment Date"readonly />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar" title="Due Payment Date"></span><br>
                        </span>
                    </div>


                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker2').datetimepicker({
                                viewMode: 'years',
                                format: 'DD/MM/YYYY'

                            });
                        });
                    </script>

                </div>

                <div class="form-group col-sm-6">


                    <div class='input-group' id='datetimepicker5'>
                        <input type='text' class="form-control" placeholder=" Payment On" readonly/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar" title="Payment On date"></span><br>
                        </span>
                    </div>


                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker5').datetimepicker({
                                viewMode: 'years',
                                format: 'DD/MM/YYYY'

                            });
                        });
                    </script>
                </div>
            </div>



            <div class="form-group col-sm-12">
                <div class="form-group col-sm-12">
                    <textarea name="person_address" class="form-control" placeholder="Please type Payment Description" style="max-height: 100px;max-width: 680px;"></textarea>
                </div>
            </div>




            <div class="checkbox col-sm-12" >
                <div class="checkbox col-sm-6 col-sm-offset-5" >
                    <a href="student_management.html" class="btn btn-success">Cancel</a> 
                    <button type="submit" id="submit" class="btn btn-success">Submit</button>

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


    </div>


</div>


<!-- Bkash MOdal Start here -->

<div class="modal fade" id="bkashModal" tabindex="-1" role="dialog" aria-labelledby="bkashModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" >

            <div class="modal-header" style="padding: 20px">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: left">Bkash Payment</h4>
            </div>
            <div class="modal-body">
                <form id="formID4" action="" method='post'>


                    <table class="text-center table table-responsive table-striped">
                        <tr>
                            <td>Mobile Number</td>
                            <td>Transaction Number</td>
                            <td colspan="2">Invoice Total</td>
                        </tr>
                        <tr class="gray ">
                            <th>
                                <span id="mobile_number">&nbsp;</span>
                            </th>

                            <th>
                                <span id="transaction_number"></span> 

                            <th style="padding: 3px" colspan="2">
                                <button type="submit" id="payBtn" style="float: right;display: block" class="btn btn-success" value="Pay">Pay Now</button>
                            </th>
                        </tr>
                    </table>

                </form>

                <br><br>

                <div class="col-sm-12">
                    <div class="col-sm-5">
                        <h4 class="modal-title" id="myModalLabel" style="text-align: left" ><span id="credit_level_t">Add Bikash </span> </h4> 
                    </div>
                    <div class="col-sm-5 "></div>
                    <div class="col-sm-2 ">
                        <a href="#" onclick="updateBCard()">   <span class="glyphicon glyphicon-menu-down" aria-hidden="true" id="bkash_Form_Open_Icon" style="display: block"></span></a>
                        <a href="#" onclick="updateBCardClose()">   <span class="glyphicon glyphicon-menu-up" aria-hidden="true" id="bkash_Form_Close_Icon" style="display: none"></span></a>
                    </div>
                    <div class="col-sm-12 "><hr></div>
                    <script>
                        function updateBCard() {

                            var bkashform = document.getElementById('bkashform');
                            var bkash_Form_Open_Icon = document.getElementById('bkash_Form_Open_Icon');
                            var bkash_Form_Close_Icon = document.getElementById('bkash_Form_Close_Icon');



                            bkashform.setAttribute("style", 'display:block; ');
                            bkash_Form_Open_Icon.setAttribute("style", 'display:none; ');
                            bkash_Form_Close_Icon.setAttribute("style", 'display:block; ');

                        }

                        function updateBCardClose() {
                            var bkashform = document.getElementById('bkashform');
                            var bkash_Form_Open_Icon = document.getElementById('bkash_Form_Open_Icon');
                            var bkash_Form_Close_Icon = document.getElementById('bkash_Form_Close_Icon');



                            bkashform.setAttribute("style", 'display:none; ');
                            bkash_Form_Open_Icon.setAttribute("style", 'display:block; ');
                            bkash_Form_Close_Icon.setAttribute("style", 'display:none; ');
                            //                        
                        }
                    </script>

                    <script>
                        function changeButton(given_text, cpbtn, crbtn) {
                            var nbutton = document.getElementById(cpbtn);
                            var cbutton = document.getElementById(crbtn);

                            if (given_text == 1)
                            {
                                nbutton.setAttribute("style", 'display:block; ');
                                cbutton.setAttribute("style", 'display:none; ');
                            }

                            if (given_text == 2) {
                                nbutton.setAttribute("style", 'display:none; ');
                                cbutton.setAttribute("style", 'display:block; ');
                            }
                        }
                    </script>

                    <div class="col-sm-12"> <!--id="formID2" -->
                        <form name="ttt" id="formID2" action="" method="post">
                            <span id="bkashform" style="display: none">

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

                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" name="bkash_mobile_number" id="bkash_mobile_number" 
                                               value="" maxlength="12" placeholder="Please Type  Bkash Number">

                                    </div>
                                </div>

                                <div class="col-sm-12"> 
                                    <br>
                                </div>
                                <div class="col-sm-12">
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" name="bkash_transaction _number" id="bkash_transaction _number" 
                                               value="" maxlength="12" placeholder="Please Type  Bkash Transaction Number">

                                    </div>
                                </div>

                                <div class="col-sm-12"> 
                                    <br>
                                </div>

                                <div class="col-sm-12">
                                    <div class="col-sm-4">
                                        <input class="form-control btn btn-success" id="sm" type="submit" value="Add Bkash">
                                    </div>
                                </div>
                                <div class="col-sm-12"> 
                                    <br><hr>
                                </div>

                            </span>
                        </form>

                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

        </div>
    </div>
</div>
<!--Bkash modal end-->


<!-- Paypal MOdal Start here -->

<div class="modal fade" id="PaypalModal" tabindex="-1" role="dialog" aria-labelledby="bkashModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" >

            <div class="modal-header" style="padding: 20px">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: left">Paypal Payment</h4>
            </div>
            <div class="modal-body">
                <form id="formID4" action="" method='post'>


                    <table class="text-center table table-responsive table-striped">
                        <tr>
                            <td>Paypal ID</td>
                            <td colspan="2">Invoice Total</td>
                        </tr>
                        <tr class="gray ">
                            <th>
                                <span id="paypal_id">&nbsp;</span>
                            </th>


                            <th style="padding: 3px" colspan="2">
                                <button type="submit" id="payBtn" style="float: right;display: block" class="btn btn-success" value="Pay">Pay Now</button>
                            </th>
                        </tr>
                    </table>

                </form>

                <br><br>

                <div class="col-sm-12">
                    <div class="col-sm-5">
                        <h4 class="modal-title" id="myModalLabel" style="text-align: left" ><span id="credit_level_t">Add Paypal </span> </h4> 
                    </div>
                    <div class="col-sm-5 "></div>
                    <div class="col-sm-2 ">
                        <a href="#" onclick="updatePCard()">   <span class="glyphicon glyphicon-menu-down" aria-hidden="true" id="paypal_Form_Open_Icon" style="display: block"></span></a>
                        <a href="#" onclick="updatePCardClose()">   <span class="glyphicon glyphicon-menu-up" aria-hidden="true" id="paypal_Form_Close_Icon" style="display: none"></span></a>
                    </div>
                    <div class="col-sm-12 "><hr></div>
                    <script>
                        function updatePCard() {

                            var paypalform = document.getElementById('paypalform');
                            var paypal_Form_Open_Icon = document.getElementById('paypal_Form_Open_Icon');
                            var paypal_Form_Close_Icon = document.getElementById('paypal_Form_Close_Icon');



                            paypalform.setAttribute("style", 'display:block; ');
                            paypal_Form_Open_Icon.setAttribute("style", 'display:none; ');
                            paypal_Form_Close_Icon.setAttribute("style", 'display:block; ');

                        }

                        function updatePCardClose() {
                            var paypalform = document.getElementById('paypalform');
                            var paypal_Form_Open_Icon = document.getElementById('paypal_Form_Open_Icon');
                            var paypal_Form_Close_Icon = document.getElementById('paypal_Form_Close_Icon');



                            paypalform.setAttribute("style", 'display:none; ');
                            paypal_Form_Open_Icon.setAttribute("style", 'display:block; ');
                            paypal_Form_Close_Icon.setAttribute("style", 'display:none; ');
                            //                        
                        }
                    </script>

                    <script>
                        function changeButton(given_text, cpbtn, crbtn) {
                            var nbutton = document.getElementById(cpbtn);
                            var cbutton = document.getElementById(crbtn);

                            if (given_text == 1)
                            {
                                nbutton.setAttribute("style", 'display:block; ');
                                cbutton.setAttribute("style", 'display:none; ');
                            }

                            if (given_text == 2) {
                                nbutton.setAttribute("style", 'display:none; ');
                                cbutton.setAttribute("style", 'display:block; ');
                            }
                        }
                    </script>

                    <div class="col-sm-12"> <!--id="formID2" -->
                        <form name="ttt" id="formID2" action="" method="post">
                            <span id="paypalform" style="display: none">

                                <div class="col-sm-12 form-group">
                                    <div class="col-sm-12 form-group"></div>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" name="paypal_id_number" id="paypal_id_number" 
                                               value="" placeholder="Please Type  Paypal ID Number">
                                    </div>
                                </div>

                                <div class="col-sm-12"> 
                                    <br>
                                </div>

                                <div class="col-sm-12">
                                    <div class="col-sm-4">
                                        <input class="form-control btn btn-success" id="sm" type="submit" value="Add Paypal">
                                    </div>
                                </div>
                                <div class="col-sm-12"> 
                                    <br><hr>
                                </div>

                            </span>
                        </form>

                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

        </div>
    </div>
</div>
<!--Paypal modal end-->



<!-- Credit Card MOdal Start here -->

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" >

            <div class="modal-header" style="padding: 20px">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: left">Credit Card Payment</h4>
            </div>
            <div class="modal-body">
                <form id="formID4" action="" method='post'>
                    <input type="hidden" id="card_t_value" name="card_type" value="">
                    <input type="hidden" id="card_n_value" name="card_number" value="">
                    <input type="hidden" id="card_m_value" name="month" value="">
                    <input type="hidden" id="card_y_value" name="year" value="">
                    <input type="hidden" id="card_number_cvv_value" name="card_number_cvv_value" value="">
                    <input type="hidden" id="total_price" name="total_price" value="">

                    <table class="text-center table table-responsive table-striped">
                        <tr>
                            <td>Credit Card</td>
                            <td>Expiration Date</td>
                            <td colspan="2">Invoice Total</td>
                        </tr>
                        <tr class="gray">
                            <th>
                                <span id="card_type_value"></span>&nbsp;<span  id="card_number_value"></span>
                            </th>

                            <th>
                                <span id="card_month_value"></span><span id="card_year_value"></span>
                            </th>

                            <th style="padding: 3px" colspan="2">
                                <button type="submit" onclick="savePay();" id="payBtn" style="float: right;display: block" class="btn btn-success" value="Pay">Pay Now</button>
                                <script>

                                    function savePay() {
                                        var payment_id = document.getElementById('pay_id').innerHTML;

                                        var card_month_value = document.getElementById('card_m_value').value;
                                        var card_type_value = document.getElementById('card_t_value').value;
                                        var card_year_value = document.getElementById('card_y_value').value;
                                        var card_number_value = document.getElementById('card_n_value').value;
                                        var total_price = document.getElementById('total_price').value;
                                        var card_number_cvv = document.getElementById('card_number_cvv_value').value;


                                        serverPage = '';
                                        //alert(serverPage);
                                        xmlhttp.open("GET", serverPage);
                                        xmlhttp.onreadystatechange = function ()
                                        {
                                            // alert(xmlhttp.readyState);
                                            //alert(xmlhttp.status);
                                            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                            {
                                                //                                                                                                location.reload();
                                                var paym_id = payment_id.replace("  ", "");
                                                window.location = '';
                                            }
                                        }
                                        xmlhttp.send(null);
                                    }
                                </script>
                            </th>
                        </tr>
                    </table>

                </form>

                <br><br>

                <div class="col-sm-12">
                    <div class="col-sm-5">
                        <h4 class="modal-title" id="myModalLabel" style="text-align: left" ><span id="credit_level_t">Add Credit Card</span> </h4> 
                    </div>
                    <div class="col-sm-5 "></div>
                    <div class="col-sm-2 ">
                        <a href="#" onclick="CreditCardForm_Open()">   <span class="glyphicon glyphicon-menu-down" aria-hidden="true" id="Credit_Card_Form_open" style="display: block"></span></a>
                        <a href="#" onclick="CreditCardForm_Close()">   <span class="glyphicon glyphicon-menu-up" aria-hidden="true" id="Credit_Card_Form_close" style="display: none"></span></a>
                    </div>
                    <div class="col-sm-12 "><hr></div>
                    <script>
                        function CreditCardForm_Open() {

                            var Credit_Crad_Form = document.getElementById('Credit_Crad_Form');
                            var Credit_Card_Form_open = document.getElementById('Credit_Card_Form_open');
                            var Credit_Card_Form_close = document.getElementById('Credit_Card_Form_close');
                            //                                        var cbutton = document.getElementById(crbtn);


                            Credit_Crad_Form.setAttribute("style", 'display:block; ');
                            Credit_Card_Form_open.setAttribute("style", 'display:none; ');
                            Credit_Card_Form_close.setAttribute("style", 'display:block; ');
                            //                        
                        }

                        function CreditCardForm_Close() {
                            var Credit_Crad_Form = document.getElementById('Credit_Crad_Form');
                            var Credit_Card_Form_open = document.getElementById('Credit_Card_Form_open');
                            var Credit_Card_Form_close = document.getElementById('Credit_Card_Form_close');
                            //                                        var cbutton = document.getElementById(crbtn);


                            Credit_Crad_Form.setAttribute("style", 'display:none; ');
                            Credit_Card_Form_open.setAttribute("style", 'display:block; ');
                            Credit_Card_Form_close.setAttribute("style", 'display:none; ');
                            //                        
                        }
                    </script>

                    <script>
                        function changeButton(given_text, cpbtn, crbtn) {
                            var nbutton = document.getElementById(cpbtn);
                            var cbutton = document.getElementById(crbtn);

                            if (given_text == 1)
                            {
                                nbutton.setAttribute("style", 'display:block; ');
                                cbutton.setAttribute("style", 'display:none; ');
                            }

                            if (given_text == 2) {
                                nbutton.setAttribute("style", 'display:none; ');
                                cbutton.setAttribute("style", 'display:block; ');
                            }
                        }
                    </script>

                    <div class="col-sm-12"> <!--id="formID2" -->
                        <form name="ttt" id="formID2" action="" method="post" >
                            <div id="Credit_Crad_Form" style="display: none">

                                <div class="col-sm-12">
                                    <div class="col-sm-10 ">

                                        <div class="col-sm-6" style="padding: 0;margin: 10px 0 0 0;">  <label > Credit Card Type  :  &nbsp;&nbsp;</label></div>


                                        <div class="radio radio-success col-sm-6 padding-zero" >


                                            <input  onclick="" type="radio" name="card_type" id="Visa" value="3" >
                                            <label for="Visa"> Visa</label>
                                            <span style="margin-right: 30px"></span>
                                            <input  onclick="" type="radio" name="card_type" id="Master" value="2">
                                            <label for="Master">Master</label>
                                        </div>
                                    </div>
                                    <!--                                        <div class="col-sm-5"><level>Credit Card Type </level></div>
                                                                            <div class="col-sm-6">
                                                                                <input data-errormessage-value-missing="Credit Card Type Field is Required !" class=""  type="radio" name="credit_card_type" value="2" id="credit_card_type">Master
                                                                                <input data-errormessage-value-missing="Credit Card Type Field is Required !" class=""  type="radio" name="credit_card_type" value="3" id="credit_card_type">Visa
                                                                            </div>-->
                                </div>

                                <div class="col-sm-12"> 
                                    <br>
                                </div>
                                <div class="col-sm-12">

                                    <div class="col-sm-8">
                                        <input type="text" 
                                               data-errormessage-value-missing="Credit Card Number Field is Required !" 
                                               class="form-control "
                                               name="credit_card" id="credit_card" 
                                               value="" maxlength="16"
                                               placeholder="Please Type Your credit Card Number">
                                        <input type="hidden" id="credit_card">
                                    </div>
                                </div>

                                <div class="col-sm-12"> 
                                    <br>
                                </div>
                                <div class="col-sm-12">
                                    <div class="col-sm-8">
                                        <!--<level> Expiration Date</level></div>-->
                                        <div class="col-sm-6" style="padding: 0">
                                            <select id="month"  name="month" data-errormessage-value-missing="Month Field is Required !" 
                                                    class="form-control ">
                                                <option value="">Select Month</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-6" style="padding:0 0 0 5px">
                                            <select id="year" name="year" 
                                                    data-errormessage-value-missing="Year Field is Required !" 
                                                    class="form-control " >
                                                <option value="">Select Year</option>
                                                <option value="2014">2014</option>
                                                <option value="2015">2015</option>
                                                <option value="2016">2016</option>
                                                <option value="2017">2017</option>
                                                <option value="2018">2018</option>
                                                <option value="2019">2019</option>
                                                <option value="2020">2020</option>
                                                <option value="2021">2021</option>
                                                <option value="2022">2022</option>
                                                <option value="2023">2023</option>
                                                <option value="2024">2024</option>
                                                <option value="2025">2025</option>

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

                                <div class="col-sm-12"> 
                                    <br>
                                </div>
                                <div class="col-sm-12">

                                    <div class="col-sm-8">
                                        <input data-errormessage-value-missing="CVV2 Field is Required !" class="form-control validate[required],custom[cardcsvlength]"  type="password" name="card_number_cvv2" placeholder="Plase Type Your  CVV2 Number " maxlength="3"  value="" id="card_number_cvv2">
                                    </div>
                                </div>
                                <div class="col-sm-12"> 
                                    <br>
                                </div>

                                <div class="col-sm-12">
                                    <div class="col-sm-4">
                                        <input class="form-control btn btn-success" id="sm" type="submit" value="Add Credit Card">
                                    </div>
                                </div>
                                <div class="col-sm-12"> 
                                    <br><hr>
                                </div>

                            </div>
                        </form>
                        <script>
                            $("form").submit(function (event) {
                                event.preventDefault();
                            });
                            function updateCreditCard() {
                                //'ucform', 'payView', 'cUopen', 'cUclose', 'payBtn'
                                var aflag = false;
                                var bflag = false;
                                var cflag = false;
                                var dflag = false;
                                var eflag = false;
                                var a = document.forms['ttt'].elements['credit_card_type'].value;
                                var b = document.getElementById("credit_card").value;
                                var c = document.getElementById("month").value;
                                var d = document.getElementById("year").value;
                                var e = document.getElementById("card_number_cvv2").value;

                                //Credit Card Type Checking
                                if (a == 3) {
                                    var card_type = 'Visa';
                                    aflag = true;
                                } else if (a == 2) {
                                    var card_type = 'Master';
                                    aflag = true;
                                } else {
                                    aflag = false;
                                }

                                //START Credit Card Number Checking
                                bflag = /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/.test(b);
                                // for Master Card
                                if (card_type_value == 2) {
                                    var cardno = /^(?:5[1-5][0-9]{14})$/;
                                    if (b.match(cardno) && bflag == true)
                                        bflag = true;
                                    else
                                        bflag = false;
                                }
                                // for Visa Card
                                if (card_type_value == 3) {
                                    var cardno = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
                                    if (b.match(cardno) && bflag == true)
                                        bflag = true;
                                    else
                                        bflag = false;
                                }

                                if (b.length == 16) {
                                    var b = b.substring(12, 16);
                                } else {
                                    bflag = false;
                                }
                                //END Credit Card Number Checking

                                //START Credit Card Expiration Date Checking
                                var date = new Date();
                                var month = date.getMonth() + 1;
                                var year = date.getFullYear();

                                if (c < month && d <= year) {
                                    cflag = false;
                                } else if (d >= year) {
                                    cflag = true;
                                }
                                //END Credit Card Expiration Date Checking

                                //CVV2 Checking
                                if (e.length == 3)
                                    eflag = true;
                                else
                                    eflag = false;

                                //START Set data to PAY FORM 

                                var update_credit = document.getElementById('ucform');
                                var credit_view = document.getElementById('payView');
                                var credit_view_o = document.getElementById('cUopen');
                                var credit_view_c = document.getElementById('cUclose');
                                var btnpay = document.getElementById('payBtn');

                                if (aflag == true && bflag == true && cflag == true && eflag == true) {
                                    document.getElementById("card_n_value").value = b;
                                    document.getElementById("card_m_value").value = c;
                                    document.getElementById("card_y_value").value = d;
                                    document.getElementById("card_t_value").value = a;
                                    document.getElementById("card_number_cvv_value").value = e;

                                    document.getElementById("card_number_value").innerHTML = b;
                                    document.getElementById("card_month_value").innerHTML = c;
                                    document.getElementById("card_year_value").innerHTML = d;
                                    document.getElementById("total_price_v").innerHTML = ;
                                            document.getElementById("credit_level_t").innerHTML = 'Update Credit Card';
                                    document.getElementById("card_type_value").innerHTML = card_type;

                                    update_credit.setAttribute("style", 'display:none; ');
                                    btnpay.setAttribute("style", 'display:block; ');
                                } else {
                                    btnpay.setAttribute("style", 'display:none; ');
                                }
                                //END Set data to PAY FORM 

                                credit_view_o.setAttribute("style", 'display:block; ');
                                credit_view_c.setAttribute("style", 'display:none; ');
                            }
                        </script>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

        </div>
    </div>
</div>
<!--Credit Card modal end-->





