<style>
    .iconspan {
        float: right;
        margin-right: 16px !important;
        margin-top: -24px;
        position: relative;
        z-index: 2;
        color: black;
    }
    
    .tableFixHead          { overflow: auto; height: 100px; }
	.tableFixHead thead th { position: sticky; top: 0; z-index: 1; background-color:grey;}
	table  { border-collapse: collapse; width: 100%; }
	th, td { padding: 8px 16px;}

    td {
		vertical-align: middle!important;
		padding:0px!important;
		text-align:left!important;
		background-color: #eee;
	}

    td input, td select {
        padding:0px!important;
		border-radius:0px!important;
		border-color:transparent!important;
		background-color: white;
	}

    tr.highlight > td {
	    background: #3c8dbc!important;
	    color: #333!important;
	}
</style>
<div id="screen[index]" style="padding-top: 20px;"> 
    <div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Customer Name</label>
                    <input type="text" class="form-control col-sm-2" id="txtConversationReportCustomerNameFilter">
                </div>
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Contact Name</label>
                    <input type="text" class="form-control col-sm-2" id="txtConversationReportContactNameFilter">
                </div>
                <div class="col-sm-2" style="padding-right: 0px; white-space: nowrap;">
                    <label style="text-align:left;" for="" class="control-label">Conversation Date From</label>
                    <input type="date" class="form-control col-sm-2" id="txtConversationReportConvDateFromFilter">
                </div>
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Conversation Date To</label>
                    <input type="date" class="form-control col-sm-2" id="txtConversationReportConvDateToFilter">
                </div>
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Next Action Date From</label>
                    <input type="date" class="form-control col-sm-2" id="txtConversationReportNextDateFromFilter">
                </div>
                <div class="col-sm-2" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Next Action Date To</label>
                    <input type="date" class="form-control col-sm-2" id="txtConversationReportNextDateToFilter">
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="col-sm-4" style="padding-left: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Assign To</label>
                    <select class="form-control col-sm-2" id="txtConversationReportNextAssignToFilter"> 
                        <option value="0">All</option>
                        <?php echo $this->getAllUsers(); ?>
                    </select>
                </div>
            <div class="col-sm-1">
                <div class="col-sm-12" style="padding-left: 0px;">
                    <br>
                    <a href="#" class="btn btn-secondary btn-md" style="background-color:grey;color:white;margin-top:5px;" onclick="filterConversationReport();">Filter</a>
                </div>
            </div>
        </div>

        <div class="col-md-12" id="errorShow"></div>

        <div class="col-md-12" style="margin-top: 20px;">
            <div class="tableFixHead" id="testData" style="height: 710px;overflow: auto;">
                <table class="table table-bordered" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="conversationreport-table">
                </table>
            </div>
        </div>
    </div>

	 <!-- button to trigger the things -->
    <button id="activatebuttonscreen[index]" onclick='reactivatescreen();' style="display: none;">activate screen button</button>
</div>

<div id="screen[index]a"></div>

    <!-- //================================================================= -->
    <!-- LOADING PROGRESS MODAL -->
	<div id="journalInquiryLoadingModal" tabindex="-1" class="modal fade" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header" style="background-color:#3c8dbc;color:white;">
					<h4 class="modal-title" id="journalInquiryLoadingModalTitle">Processing...</h4>
				</div>
				<div class="modal-body">
					<div class="progress progress-striped active">
						<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%">
							<!-- <span class="sr-only">70% Complete</span> -->
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
    
    <!-- //Message modal -->
	<div id="msgJournalInquiryModal" class="modal fade" style="overflow: auto;overflow-y: scroll;">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header" id="msgJournalInquiryModalHeader" style="background-color:#3c8dbc;color:white;">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="msgJournalInquiryModalTitle" >Message</h4>
	            </div>
	            <div class="modal-body">
		            <P><span id="journalinquiry_span_msg"></span></P>
	            </div>
	            <div class="modal-footer" style="padding:5px">
	            	<div id="msgJournalInquiryModalButton">
	                    <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal">Close</button>
	                </div>
	            </div>
	        </div>
	    </div>
    </div>
	<!-- //================================================================= -->

<!-- the function index that you want to run -->
<script type="text/javascript">
    function reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>

<script>
$(document).ready(function () {

        $('#txtJournalInquiryTransDateFromFilter').datepicker({
            format: "dd/mm/yyyy",
            autoclose: true,
        });
        $('#txtJournalInquiryTransDateToFilter').datepicker({
            format: "dd/mm/yyyy",
            autoclose: true,
        });
        
    filterRow('journalinquiry-row-filter',this,false);
    // filterJournalInquiry() ;
});
</script>