@extends('layouts.app')
@section('title')Email List  @endsection
@section('content')
<script src="https://code.jquery.com/jquery-3.5.1.js"> </script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<style>
    div.dataTables_wrapper div.dataTables_processing {
        height: 59px !important;
    }
   .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white !important;
    border: 1px solid #fff!important;
    background-color: #fff!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff))!important;
    background: -webkit-linear-gradient(top, #fff 0%, #fff 100%)!important;
    background: -moz-linear-gradient(top, #fff 0%, #fff 100%)!important;
    background: -ms-linear-gradient(top, #fff 0%, #fff 100%)!important;
    background: -o-linear-gradient(top, #fff 0%, #fff 100%)!important;
    background: linear-gradient(to bottom, #fff 0%, #fff 100%)!important;
    
    
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
        padding: 0.5em 1mm !important;
}
#err-pan {
    color: red;
    font-size: 13px;
} 
    
</style>
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4" style="padding-right: 30px;">
         </div> 
 </div>

   
<section class="content">
    <div class="row">
        <div class="col-xs-12">
      @include('layouts.flesh-message')
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Security Question</h3>
                    <button type="button" class="top-btn btn btn-primary" id="addnew" onclick="add_new();" ><i class="fa fa-plus"></i>Add New</button>
                </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="example2" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Sr no.</th>
                        <th>Question</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
               </thead>
                <tbody>
            
                </tbody>

            </table>
           
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
    </div>
    
    
    <div class="modal fade in" id="modal-question" style="padding-right: 15px;">
  <div class="modal-dialog " style="margin-left: 22%;">
    <div class="modal-content modal-sm" style="width: 75%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

            <span aria-hidden="true">×</span></button>
            <h4 class="modal-title"> Security Question </h4>
        </div>
            <input type="hidden" value="{{url('/')}}/savequestion" id="saveurl" name="">
            <form action="javascript:void(0)" enctype="multipart/form-data" name="saveleadform" id="saveleadform" method="POST">
                    <div class="modal-body">
                        <label> Question </label>
                        <input type="text" name="question" id="question" class="form-control">
                           
                    </div>
            <div class="modal-footer">
                <button type="submit" id="submitleadform" class="btn btn-primary" onclick="save_question();">Save</button> 
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            </div>
        </form>
   </div>
   <!-- /.modal-content -->
 </div>
 <!-- /.modal-dialog -->
</div>



  </section>      
<script src="{{ asset('js/agentemail.js') }}"></script>
<script src="{{ asset('js/jquery.blockui.min.js') }}"></script>
<script src="{{ asset('js/custom_function.js?v=') }}1780416639"></script>

<script>
$(document).ready(function() {
    get_record();
    $('#delete_all').hide();
} );

function add_new(){
   showModal('modal-question')
}

function save_question(){
    formId ='saveleadform';
     var form = $('#'+formId)[0]; // You need to use standart javascript object here
    var formData = new FormData(form);
    var token = $("input[name=_token]").val();
    
    formData.append('_token',token);
    url = $('#saveurl').val();
    
    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        contentType: false,
        processData: false,
        data: formData,
		 beforeSend: function(){
		//showLoader();
			}, 
        success: function (obj)
        {
			console.log(obj)
		 hideLoader();
		 
		 if (obj.err == 0)
            {
            appendMessageBody(formId);
            showSuccessMessage(formId,obj.msg); 
                setTimeout(function(){
                    closeModal('modal-question')
                     get_record();
                },2000) 
            }
  
            if (obj.err == 1)
            {
              
            showErrorMessage(formId,obj.msg); 
                      
            }
        
            if (obj.err == 2)
            {
                appendMessageBody(formId);
                showDatabaseErrorMessage(formId,obj.msg);  
            }
            
        }

    });
}

function get_record(){
    var token = $("input[name=_token]").val();
    $('#example2').DataTable({
        "destroy": true,
        "bProcessing": true,
        "language": {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="margin-top: -8%;"></i><span class="sr-only">Loading...</span> '},
        "lengthMenu": [[25, 50, 100], [25, 50, 100]],
        "serverSide": true,
        "ajax":{
            url :"question_list",
            type: "post",
            data: {"_token": token}, 
        },
        'columnDefs': [ {
            'targets': [0], 
            'orderable': false,
        }]
    });
    
    
    $('#example2').on('draw.dt', function () {
      $('.popoverData').popover({ trigger: "hover" });
      $('[data-toggle="tooltip"]').tooltip();
    });
    
}

function deleteQuestion(id){
    var token = $("input[name=_token]").val();
    swal({
        title: "Do you want to delete ?",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: 'btn-success',
        confirmButtonText: 'Yes',
        cancelButtonClass: "btn-danger",
        cancelButtonText: "No",
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function(isConfirm){
        if (isConfirm){
            $.post('deleteQuestion', { 'id':id,"_token":token})
            .done(function(response){
              console.log(response);
              swal({
                type: 'success',
                title: 'Your file has been deleted',
                showConfirmButton: false,
                timer: 2000
            });
                setTimeout(function(){
                   
                      get_record()
                },2000)
            })
            .fail(function(){
                swal({type:"error", title:"Something went wrong.",showConfirmButton: false,timer: 1000});
            })
        }else{
          swal({type:"error", title:"Not Deleted",showConfirmButton: false,timer: 1000});
        }
    });
}



function changeQuestionStatus(id){
    var token = $("input[name=_token]").val();
    $.post('changeQuestionStatus', { 'id':id,"_token":token})
    .done(function(response){
      console.log(response);
      swal({
        type: 'success',
        title: 'Status changed',
        showConfirmButton: false,
        timer: 2000
    });
        setTimeout(function(){
              get_record()
        },2000)
    })
    .fail(function(){
        swal({type:"error", title:"Something went wrong.",showConfirmButton: false,timer: 1000});
    })
}

function editQuestion(id){
    alert(id)
}
</script>


  @endsection