{% extends "conferenceapp/layout.html" %} 
  {% block style %}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 {% endblock %}
 {% block content %}

<!-- <div class="container"> -->

    <form id="transaction_api_form">
    	<div class="card" style="border-color:#a5a7a7;border-radius: 10px;margin: 10px;">
    		<div class="card-body ">
                <div class="row">
                    <div class="col-lg-10 text-right">
                        <h2  style="text-align: center;color: darkred;">{{conf_data.conf_id or ''}} Payumoney Transactions</h2>
                    </div>
                    <div class="col-lg-2 text-center">
                       <input type="button" class="btn btn sm btn-danger" value="Back" onClick="javascript:history.go(-1)" />
                   </div>
                </div><br/>

                <div class="progress">
                  <div class="progress-bar bg-success " role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div> 

               
             

                <div id="msg_div" style="color:red;text-align: center;font-size: 20px;"></div>
                <div class="row">
                    <div class="col-lg-3"></div >
                    
                    <div class="alert alert-danger alert-dismissible col-lg-6 text-center" role="alert" id="error_msg_div">
                        <p class="close close_id"  aria-label="close">&times;</p>
                        <span aria-hidden="true" id="error_msg" >&times;</span>
                        <!-- <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> -->
                    </div>
                    <div class="col-lg-3"></div>
                </div>

                <div class="row">
        			<div class="col-lg-3 col-md-3 col-sm-12 text-center">
                        <label>Conference</label><br />
                        <select class="form-control" id="conf_id" name="conf_id" > 
                            <option value="" id="select"  selected>-- Select Conference --</option>
                            {% if conf_data %} {% for row in conf_data %}
                            <option value="{{row.conf_id}}">{{row.conf_name}} </option>

                            {% endfor %} {% endif %}
                        </select>
                        <div id="error-message_conf" style="color: red;font-size: 18px;"></div>
        			</div>

                    <div class="col-lg-3 col-md-3 col-sm-12 text-center">
                        <label>Start Date Time</label><br />
                        <input class="form-control" type="date" id="from_date" name="from_date" value="{{current_dt }}" placeholder="--- Please Select Date ----" />
                        <div id="error-message_f_date" style="color: red;font-size: 18px;"></div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 text-center">
                        <label>End Date Time</label><br />
                        <input class="form-control" type="date" id="to_date" name="to_date"  value="{{current_dt}}"placeholder="--- Please Select Date ----"/>
                        <div id="error-message_e_date" style="color: red;font-size: 18px;"></div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 text-center mt-4 ">
                        <input type="button" class="btn btn-primary" name="get_data" id="get_data" value="Get Data from Payumoney" >
                    </div>
                </div><br/>
            </div>
    	</div>
        <!-- Filter block start -->
        <div class="card"  style="border-color:#a5a7a7;border-radius: 10px;margin: 10px;">
            <div class="card-header"  id="card_header_div" style="background-color: #072645;color: white;">
                <h6>Filter  <i class="bi bi-filter"></i></h6> 

            </div>
            <div class="card-body" id="card_body_div" > 
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12">
                        <label>Select Conference </label>
                        <select class="form-control" id="conf_id_1"name="conf_id_1"> 
                            <option value="" id="select"  selected>-- Select Conference --</option>
                            {% if conf_data %} {% for row in conf_data %}
                            <option value="{{row.conf_id}}">{{row.conf_name}} </option>

                            {% endfor %} {% endif %}
                        </select>
                        <div id="error_msg_conf" style="color: red;font-size: 18px;"></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                        <label>From Date </label>
                        <input type="date" name="from_date_1" class="form-control" id="from_date_1">
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                        <label>To Date </label>
                        <input type="date" name="to_date_1" class="form-control" id="to_date_1">
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                         <label>Status</label>
                         <select class="form-control" id="status" name="status" multiple>
                            <option value="" id="select">Select Status</option>
                            <option value="success">success</option>
                            <option value="failure">failure</option>
                         </select>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                        <label style="color: transparent;"><br/> . </label>
                        <input type="button" class="btn btn-success" name="submit_btn" id="submit_btn" value="Submit" style="background-color: #1f2c1f !important;">
                    </div>
                </div>
            </div> <!-- card body end-->
        </div> <!-- card end -->
        <!-- Filter block end -->
        <div class="card" id="card_body_div_1" style="background-color:#fff0f0;border-radius: 10px;margin: 10px;">
            <div class="card-body" >
                <div class="table" id="transaction_table"></div>
            </div>
        </div>
        
        
    </form>
    

    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
    <script type="text/javascript">

    var BaseUrl = document.location.origin;


    function dayDiff(firstDate, secondDate) {
      firstDate = new Date(firstDate);
      secondDate = new Date(secondDate);
      if (!isNaN(firstDate) && !isNaN(secondDate)) {
        firstDate.setHours(0, 0, 0, 0); //ignore time part
        secondDate.setHours(0, 0, 0, 0); //ignore time part
        var dayDiff = secondDate - firstDate;
        dayDiff = dayDiff / 86400000; // divide by milisec in one day
        
        return dayDiff;
      } else {
        
        return 0;
      }
    };

 
    $(document).ready(function() {
        $("#card_body_div").hide();
        $("#card_body_div_1").hide();
        $(".progress").hide();
        
        $(document).on("click" , "#card_header_div", function(e)
        {
            e.preventDefault();
            $("#card_body_div").toggle();
        });

        // $(document).on("click","#card_body_div_1",function(e) {
        //     e.preventDefault();
        //     $("#card_body_div_1").toggle();
        // });

        // conf_id selectize start

        var selectconf_id  = $("#conf_id").selectize();
        var selectize      = selectconf_id[0].selectize;

        var selectconf_id_1  = $("#conf_id_1").selectize();
        var selectize        = selectconf_id_1[0].selectize;
       


        // conf_id selectize end

        // status selectize start
        $('#status').selectize({
            plugins: ['remove_button'],
            delimiter: ',',
            persist: false,
            create: false,
            items:status // for set selected multiple values 
        });

        var select_status = $('#status').selectize({maxItems: 10});
        var selectize_status = select_status[0].selectize;

        // status selectize end

        $("#error_msg_div").hide();
      
    });

    $(document).on('click','.close_id',function(e)
    {
        $("#error_msg_div").hide();
        $("#error_msg").empty();

    });

    $(document).on('click','#get_data',function(e){
        e.preventDefault();

        var conf_id   = $("#conf_id").val();
        var from_date = $("#from_date").val();
        var to_date   = $("#to_date").val();

        if (conf_id ==''){
            var errorMessage = "Please select conference.";
            $("#error-message_conf").html(errorMessage);
            return false; 
            }
        else if (from_date.length == 0){
            var errorMessage_1 = "Please select conference.";
            $("#error-message_f_date").html(errorMessage_1);
            $("#error-message_conf").empty();
            return false; 
        }
        else if  (to_date.length == 0){
            var errorMessage_1 = "Please select conference.";
            $("#error-message_e_date").html(errorMessage_1);
            $("#error-message_f_date").empty();
            $("#error-message_conf").empty();
            return false;
        }
        else{

            $("#error-message_conf").empty();
            $("#error-message_f_date").empty();
            $("#error-message_e_date").empty();
            }

        var daysDifference = dayDiff($('#from_date').val(), $('#to_date').val());

        // Check if the difference is exactly 7 days
        if (daysDifference < 7 && daysDifference >= 0) {
            $("#error_msg_div").hide();
        }
        else if (daysDifference <= 0) {
            var errorMessage = "Please select first start date after select end date.";
            $("#error_msg_div").show();
            $("#error_msg").html(errorMessage);
            return false;
        }
        else {
            var errorMessage = "Please select a date range with a difference of less than or equal to 7 days.";
            $("#error_msg_div").show();
            $("#error_msg").html(errorMessage);
            return false;
        }       

            var formData   = $('#transaction_api_form').serialize();
            var url_1      = BaseUrl +"/payumoeny_transactions";
            var progressBar= $('.progress')


            $.ajax({
                xhr: function() 
                {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function(event) {
                        if (event.lengthComputable) {
                            var percent = (event.loaded / event.total) * 100;
                            progressBar.css('width', percent + '%');
                            // document.querySelector('.progress-${file.name}')..textContent = files[0].name; // Display filename
                        }
                    }, false);
                    return xhr;
                },

                // xhr: function() {
                // var xhr = new window.XMLHttpRequest();
                //     //Upload progress
                //     xhr.upload.addEventListener("progress", function(evt){
                //       if (evt.lengthComputable) {
                //         var percentComplete = evt.loaded / evt.total;
                //         //Do something with upload progress
                //         console.log(percentComplete);
                //       }
                //     }, false);
                //     return xhr;
                // },

                type: 'POST',
                url :  url_1,
                data: formData,
                                    
                success: function(response) {
                  var data_1 = JSON.parse(response);
                  var status = data_1.status;
                  var msg    = data_1.msg;
                  var html_data = data_1.html_data;

                  if (status == 1) {
                    
                    $(".progress").show();
                    $('.progress-container-'+status+' .file-status').html('Completed!');
                    $('.progress-container-'+status+' .file-status').css('color','green');
                    progressBar.css('background-color','green');
                    alert(msg);
                  }
                  else
                  {
                    alert(msg);
                  }
                   
                },
                error: function(error) {
                    
                    $(".progress").show();
                    $('.progress-container-'+status+' .file-status').html('Error!');
                    $('.progress-container-'+status+' .file-status').css('color','red');
                    progressBar.css('background-color','red');
                    // progressContainer.style.display = 'none'; // Hide the progress container
                    // progressBar.style.width = '0'; // Reset progress bar width
                    // fileNameSpan.textContent = ''; // Clear filename
                    // alert('An error occurred during upload.');
                }
            });
    });
            

    $('#submit_btn').click(function() {
        $("#transaction_table").show();
        var conf_id   = $("#conf_id_1").val();
        if( conf_id =$('#conf_id_1').val() == '' )
            {
              var errorMessage = "Please select conference.";
              $("#error_msg_conf").html(errorMessage);
              return false;
            }
                
            $("#error_msg_conf").empty();

        var from_date_1 = $("#from_date_1").val();
        var to_date_1   = $("#to_date_1").val();
        var status      = $("#status").val();

        var formData = $('#transaction_api_form').serialize();
        var url_1 = BaseUrl +"/view_payumoeny_transactions";

        $.ajax({
            type: 'POST',
            url :  url_1,
            data: formData,

            success: function(response) {
                var data_1 = JSON.parse(response);
                var status = data_1.status;
                var msg    = data_1.msg;
                var html_data = data_1.html_data;
                if (status == 1) {
                    $("#card_body_div_1").show();
                    $("#transaction_table").empty();
                    $("#transaction_table").html(html_data);
                    return true;
                } else {
                    alert(msg);
                    return false;
                }
            },
                error: function(error) {
                    console.log(error);
                }
        });
    });


</script>

{% endblock %}