{% extends "conferenceapp/layout.html" %}
{% block head %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

{% endblock %}
{% block style %}
<style>
    .form .error{
        color: red;

    }

.modal-dialog{
    overflow-y: initial !important;
}
.modal-body p {
    word-wrap: break-word;
    height: 70vh;
    overflow-y: scroll;
    margin: auto;
}


</style>
{% endblock %}
{% block content %}
<div class="container mt-3">
    

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 text-right">
            <a class="btn btn-danger float-right mt-1" type="button" id="back" href="{{ url_for('confapp.BackToHome') }}">Back</a>
        </div>
    </div>
    <div class="col-md-12">
        <center><h5>Error Logs</h5></center>
    </div>

    <div class="card">
        <div class="card-body">
            <form id="search_error_logs_form">
                
                <label><input type="hidden" class="ids" name="ids" id="ids" value="" /></label>
                <label><input type="hidden" class="ids_length" name="ids_length" id="ids_length" value="" /></label>
                
                <div class="row">
                    <div class="col-md-4">
                        <label for="app_type">App Type</label>
                        <select class="form-control" id="app_type" name="app_type">
                            <option value="" id="select">--SELECT--</option>
                            {% if app_type_data : %} {% for row in app_type_data %} {% if row.app_type == 'DELEGATE' %}

                            <option value="{{row.app_type}}" selected>{{row.app_type}} </option>
                            {% else %}
                            <option value="{{row.app_type}}">{{row.app_type}} </option>
                            {% endif %} {% endfor %} {% endif %}
                        </select>
                        <label id="app_type-error" name="app_type_err" class="error" for="app_type"></label>
                    </div>
                    <div class="col-md-4">
                        <label for="logger_name">Logger Name</label>
                        <select class="form-control" id="logger_name" name="logger_name">
                            <option value="" id="select">--SELECT--</option>
                            {% if logger_data : %} {% for row in logger_data %}
                            <option value="{{row.logger_name}}">{{row.logger_name}} </option>
                            {% endfor %} {% endif %}
                        </select>
                        <label id="logger_name-error" name="logger_name_err" class="error" for="logger_name"></label>
                    </div>

                    <div class="col-md-4">
                        <label for="host_url">Host URL</label>
                        <select class="form-control" id="host_url" name="host_url">
                            <option value="" id="select">--SELECT--</option>
                            {% if host_url_data : %} {% for row in host_url_data %}
                            <option value="{{row.host_url}}">{{row.host_url}} </option>
                            {% endfor %} {% endif %}
                        </select>
                        <label id="host_url-error" name="host_url_err" class="error" for="host_url"></label>
                    </div>


                    <div class="col-md-4">
                        <label for="before_time">Before Time</label>
                        <select class="form-control" id="before_time" name="before_time">
                            <option value=""> --SELECT--</option>
                            <option value="10"> 10 Minutes</option>
                            <option value="20"> 20 Minutes</option>
                            <option value="30"> 30 Minutes</option>
                            <option value="1440"> One day</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-4">
                        <label for="limit">Limit</label>
                        <select class="form-control" id="limit" name="limit">
                            <option value=""> --SELECT--</option>
                            <option value="10"> 10</option>
                            <option value="20" selected> 20</option>
                            <option value="50"> 50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="db_name">DB Name</label>
                        <select class="form-control" id="db_name" name="db_name">
                            <option disabled> --SELECT--</option>
                            <option value="numerotech_primary_db" selected>numerotech_primary_db</option>
                            <option value="numerotech_primary_db_test">numerotech_primary_db_test</option>
                        </select>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                        <button type="button" class="btn btn-primary btn-md text-center" name="search_btn" id="search_btn" class="search_btn" title="Search">Search</button>
                        <button type="button" title="Clear" class="btn btn-danger" id="clear_btn" name="clear_btn">Clear</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<br>
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <div class="alert alert-success text-center alert-dismissible successMessage" id="successMessage" style="display:none;">
               <p class="close close_id"  aria-label="close">&times;</p>
               <img src="/static/images/right.png" width="21px" height="21px">
               <span class="SuccessMsg"></span>
            </div>
        </div>
        <div class="col-lg-3"></div>
    </div>
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <div   class="alert alert-danger text-center alert-dismissible errorMessage" id="errorMessage" style="display:none;">
               <p class="close close_id"  aria-label="close">&times;</p>
               <img src="static/images/wrong_img.png" width="21px" height="21px">
               <span id="errorMsg"></span>
            </div>
        </div>
        <div class="col-lg-3"></div>
    </div>


<br>
<div id="errorlog_table_data"></div>

<div class="modal mobile-responsive view_context " tabindex="-1" id="view_context" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Context</h4>
                <button type="button" class="close close_modal" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div>
                            <p id="view_context_body" class="view_context_body"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger close_modal" data-dismiss="modal">Close</button>
            </div>

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



{% endblock %}
{% block bottomscript %}  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    var BaseUrl = document.location.origin;

    $(document).on("click", "#clear_btn",function(e){
        $("#logger_name").val('');
        $("#host_url").val('');
        $("#before_time").val('');
        $("#limit").val('');
        $("#errorlog_table_data").hide();
   });

    $(document).on("click", ".close_id",function(e){
        $("#successMessage").hide();
        $("#successMsg").hide();
        $("#errorMsg").hide();
        $("#errorMessage").hide();
   });


    $(document).on("click", ".close_modal",function(e){
        $("#view_context").hide();
   });


    


 $(document).on("click", "#view_context_btn",function(e){
        var context_data = $(this).attr('data-value');       
        $("#view_context").show();
        $("#view_context_body").html(context_data);

   });



    $(document).ready(function()
    {
        $("#errorlog_table_data").hide();
        $("#successMessage").hide();
    	$("#errorMessage").hide();


        $("#search_btn").click(function (e) {
         e.preventDefault();
        var logger_name  = $("#logger_name").val();
        var host_url     = $("#host_url").val();
        var app_type     = $("#app_type").val();
        var before_time  = $("#before_time").val();
        var limit        = $("#limit").val();
        var db_name      = $("#db_name").val();

        // if(!(logger_name && host_url )){
        //     validate_search_error_logs_form();
        //     if (!$("#search_error_logs_form").valid()) {
        //             return false;
        //         }
            
        // }
        ShowProgress();

         $.ajax({
                type: "POST",
                url: BaseUrl + "/post_error_logs",
                data : {'app_type':app_type,'logger_name':logger_name,'host_url':host_url,'before_time':before_time,'limit':limit,'db_name':db_name},
                dataType:'html',
                success: function (response) {

                    var data_1 = JSON.parse(response);
                    var msg = data_1.msg;
                    
                    if (data_1.status == 1) {
                        StopProgress();
                        $("#errorlog_table_data").empty();
                        $("#errorlog_table_data").show();
                        $("#errorlog_table_data").html(data_1.html_data);
                     
                    } else {
                        alert(msg);
                        StopProgress();

                        return false;
                    }
                },
            });

    });


    });




    function validate_search_error_logs_form()
         {
             errorclass : 'error',
         
             $("#search_error_logs_form").validate({

                rules: {
                logger_name: {
                    required: true,
                },
                host_url: {
                    required: true,
                },
            },

            messages: {
                logger_name: {
                    required: "Please select logger name ",
                },
                host_url: {
                    required: "Please select host_url",
                },
            },
                 highlight: function(element) {
                     $(element).parent().addClass('error')
                 },
             
                 unhighlight: function(element) {
                     $(element).parent().removeClass('error')
                 },
         
                 submitHandler: function(form) {
                     form.submit();
                 }
            })

         }

         function ShowProgress()
{
    var text = 'loading data.. please wait..';

    if(jQuery('body').find('#resultLoading').attr('id') != 'resultLoading'){
     jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="'+document.location.origin+'/static/images/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
     // jQuery('body').append('<div id="resultLoading" style="display:none"><div><div>'+text+'</div></div><div class="bg"></div></div>');
     }

    jQuery('#resultLoading').css({
        'width':'100%',
        'height':'100%',
        'position':'fixed',
        'z-index':'10000000',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto'
    });

    jQuery('#resultLoading .bg').css({
        'background':'#000000',
        'opacity':'0.7',
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'top':'0'
    });

    jQuery('#resultLoading>div:first').css({
        'width': '250px',
        'height':'75px',
        'text-align': 'center',
        'position': 'fixed',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto',
        'font-size':'16px',
        'z-index':'10',
        'color':'#ffffff'

    });

    jQuery('#resultLoading .bg').height('100%');
       jQuery('#resultLoading').fadeIn(300);
    jQuery('body').css('cursor', 'wait');
}

function StopProgress()
{
    jQuery('#resultLoading .bg').height('100%');
       jQuery('#resultLoading').fadeOut(300);
    jQuery('body').css('cursor', 'default');
}


function callerrorlogtable(html_data){

    $("#errorlog_table_data").empty();
    $("#errorlog_table_data").show();
    $("#errorlog_table_data").html(html_data);

 }    
function callsuccessmessage(msg) {
    $("#successMessage").show();
    $(".SuccessMsg").html(msg);
}
function callerrormessage(msg) {
    $("#successMessage").show();
    $(".SuccessMsg").html(msg);
}
</script>

{% endblock %}