<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Website1</title>
    <!-- Include Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> -->
    <!-- Include table-resize CSS -->
    <link rel="stylesheet" href="https://unpkg.com/table-resize@0.5.0/dist/table-resize.min.css">
	<!-- Include jQuery -->
	<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
	<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
	<style>
		body {
			padding-top: 70px; /* Adjust this value as needed */
		}
	</style>
	

<!-- Include jquery-resizable-columns CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.1.4/dist/jquery-resizable-columns.min.css">

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top w-100">
        <div class="container-fluid">
            <form class="d-flex" action="/search/" method="get">
                <input class="form-control me-2" type="search" name="item_name" placeholder="Item Name" value="{{ input_values.item_name | default('') }}">
                <input class="form-control me-2" type="search" name="cust_id" placeholder="Customer ID" value="{{ input_values.cust_id | default('') }}">
                <input class="form-control me-2" type="search" name="cust_name" placeholder="Customer Name" value="{{ input_values.cust_name | default('') }}">
                <!-- <input class="form-control me-2" type="search" name="start_date" placeholder="Start Date" value="{{ input_values.start_date | default('') }}"> -->
                <input class="form-control me-2" type="date" name="start_date" placeholder="Start Date" aria-label="Start Date" value="{{ input_values.start_date | default('') }}">
                <input class="form-control me-2" type="date" name="end_date" placeholder="End Date" aria-label="End Date" value="{{ input_values.end_date | default('') }}">

                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>
    <!-- Include table-resize JavaScript -->
    <script src="https://unpkg.com/table-resize@0.5.0/dist/table-resize.min.js"></script>
	<script>
        // Initialize table-resize for all tables with the 'table-resizable' class
        window.onload = function() {
            tableResize(document.querySelectorAll('.table-resizable'));
        };
    </script>
	<!-- Include jquery-resizable-columns JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.1.4/dist/jquery-resizable-columns.min.js"></script>

<script>
    // Initialize column resizing when the document is ready
    $(document).ready(function() {
        $('.table-resizable').resizableColumns();
    });
</script>
<script>
	$(function(){
	  $("table").resizableColumns({
		store: window.store
	  });
	});
	</script>
<script>
	/**
 * jquery-resizable-columns - Resizable table columns for jQuery
 * @date Sat May 16 2015 19:03:57 GMT+0100 (BST)
 * @version v0.1.0
 * @link http://dobtco.github.io/jquery-resizable-columns/
 * @license MIT
 */
// !function t(e,i,n){function s(a,o){if(!i[a]){if(!e[a]){var h="function"==typeof require&&require;if(!o&&h)return h(a,!0);if(r)return r(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var d=i[a]={exports:{}};e[a][0].call(d.exports,function(t){var i=e[a][1][t];return s(i?i:t)},d,d.exports,t,e,i,n)}return i[a].exports}for(var r="function"==typeof require&&require,a=0;a<n.length;a++)s(n[a]);return s}({1:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}var s=t("./class"),r=n(s),a=t("./constants");$.fn.resizableColumns=function(t){for(var e=arguments.length,i=Array(e>1?e-1:0),n=1;e>n;n++)i[n-1]=arguments[n];return this.each(function(){var e=$(this),n=e.data(a.DATA_API);if(n){if("string"==typeof t)return n[t].apply(n,i)}else n=new r["default"](e,t),e.data(a.DATA_API,n)})},$.resizableColumns=r["default"]},{"./class":2,"./constants":3}],2:[function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(i,"__esModule",{value:!0});var s=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),r=t("./constants"),a=function(){function t(e,i){n(this,t),this.ns=".rc"+this.count++,this.options=$.extend({},t.defaults,i),this.$window=$(window),this.$ownerDocument=$(e[0].ownerDocument),this.$table=e,this.refreshHeaders(),this.restoreColumnWidths(),this.syncHandleWidths(),this.bindEvents(this.$window,"resize",this.syncHandleWidths.bind(this)),this.options.start&&this.bindEvents(this.$table,r.EVENT_RESIZE_START,this.options.start),this.options.resize&&this.bindEvents(this.$table,r.EVENT_RESIZE,this.options.resize),this.options.stop&&this.bindEvents(this.$table,r.EVENT_RESIZE_STOP,this.options.stop)}return s(t,[{key:"refreshHeaders",value:function(){var t=this.options.selector;"function"==typeof t&&(t=t.call(this,this.$table)),this.$tableHeaders=this.$table.find(t),this.assignPercentageWidths(),this.createHandles()}},{key:"createHandles",value:function(){var t=this,e=this.$handleContainer;null!=e&&e.remove(),this.$handleContainer=$("<div class='"+r.CLASS_HANDLE_CONTAINER+"' />"),this.$table.before(this.$handleContainer),this.$tableHeaders.each(function(e,i){var n=t.$tableHeaders.eq(e),s=t.$tableHeaders.eq(e+1);if(0!==s.length&&!n.is(r.SELECTOR_UNRESIZABLE)&&!s.is(r.SELECTOR_UNRESIZABLE)){$("<div class='"+r.CLASS_HANDLE+"' />").data(r.DATA_TH,$(i)).appendTo(t.$handleContainer)}}),this.bindEvents(this.$handleContainer,["mousedown","touchstart"],"."+r.CLASS_HANDLE,this.onPointerDown.bind(this))}},{key:"assignPercentageWidths",value:function(){var t=this;this.$tableHeaders.each(function(e,i){var n=$(i);t.setWidth(n[0],n.outerWidth()/t.$table.width()*100)})}},{key:"syncHandleWidths",value:function(){var t=this,e=this.$handleContainer;e.width(this.$table.width()),e.find("."+r.CLASS_HANDLE).each(function(e,i){var n=$(i),s=t.options.resizeFromBody?t.$table.height():t.$table.find("thead").height(),a=n.data(r.DATA_TH).outerWidth()+(n.data(r.DATA_TH).offset().left-t.$handleContainer.offset().left);n.css({left:a,height:s})})}},{key:"saveColumnWidths",value:function(){var t=this;this.$tableHeaders.each(function(e,i){var n=$(i);t.options.store&&!n.is(r.SELECTOR_UNRESIZABLE)&&t.options.store.set(t.generateColumnId(n),t.parseWidth(i))})}},{key:"restoreColumnWidths",value:function(){var t=this;this.$tableHeaders.each(function(e,i){var n=$(i);if(t.options.store&&!n.is(r.SELECTOR_UNRESIZABLE)){var s=t.options.store.get(t.generateColumnId(n));null!=s&&t.setWidth(i,s)}})}},{key:"onPointerDown",value:function(t){if(1===t.which){this.operation&&this.onPointerUp(t);var e=$(t.currentTarget);if(!e.is(r.SELECTOR_UNRESIZABLE)){var i=e.index(),n=this.$tableHeaders.eq(i).not(r.SELECTOR_UNRESIZABLE),s=this.$tableHeaders.eq(i+1).not(r.SELECTOR_UNRESIZABLE),a=this.parseWidth(n[0]),o=this.parseWidth(s[0]);this.operation={$leftColumn:n,$rightColumn:s,$currentGrip:e,startX:this.getPointerX(t),widths:{left:a,right:o},newWidths:{left:a,right:o}},this.bindEvents(this.$ownerDocument,["mousemove","touchmove"],this.onPointerMove.bind(this)),this.bindEvents(this.$ownerDocument,["mouseup","touchend"],this.onPointerUp.bind(this)),this.$handleContainer.add(this.$table).addClass(r.CLASS_TABLE_RESIZING),n.add(s).add(e).addClass(r.CLASS_COLUMN_RESIZING),this.triggerEvent(r.EVENT_RESIZE_START,[n,s,a,o],t),t.preventDefault()}}}},{key:"onPointerMove",value:function(t){var e=this.operation;if(this.operation){var i=(this.getPointerX(t)-e.startX)/this.$table.width()*100;if(0!==i){var n=e.$leftColumn[0],s=e.$rightColumn[0],a=void 0,o=void 0;return i>0?(a=this.constrainWidth(e.widths.left+(e.widths.right-e.newWidths.right)),o=this.constrainWidth(e.widths.right-i)):0>i&&(a=this.constrainWidth(e.widths.left+i),o=this.constrainWidth(e.widths.right+(e.widths.left-e.newWidths.left))),n&&this.setWidth(n,a),s&&this.setWidth(s,o),e.newWidths.left=a,e.newWidths.right=o,this.triggerEvent(r.EVENT_RESIZE,[e.$leftColumn,e.$rightColumn,a,o],t)}}}},{key:"onPointerUp",value:function(t){var e=this.operation;if(this.operation)return this.unbindEvents(this.$ownerDocument,["mouseup","touchend","mousemove","touchmove"]),this.$handleContainer.add(this.$table).removeClass(r.CLASS_TABLE_RESIZING),e.$leftColumn.add(e.$rightColumn).add(e.$currentGrip).removeClass(r.CLASS_COLUMN_RESIZING),this.syncHandleWidths(),this.saveColumnWidths(),this.operation=null,this.triggerEvent(r.EVENT_RESIZE_STOP,[e.$leftColumn,e.$rightColumn,e.newWidths.left,e.newWidths.right],t)}},{key:"destroy",value:function(){var t=this.$table,e=this.$handleContainer.find("."+r.CLASS_HANDLE);return this.unbindEvents(this.$window.add(this.$ownerDocument).add(this.$table).add(e)),e.removeData(r.DATA_TH),t.removeData(r.DATA_API),this.$handleContainer.remove(),this.$handleContainer=null,this.$tableHeaders=null,this.$table=null,t}},{key:"bindEvents",value:function(t,e,i,n){"string"==typeof e?e+=this.ns:e=e.join(this.ns+" ")+this.ns,arguments.length>3?t.on(e,i,n):t.on(e,i)}},{key:"unbindEvents",value:function(t,e){"string"==typeof e?e+=this.ns:e=null!=e?e.join(this.ns+" ")+this.ns:this.ns,t.off(e)}},{key:"triggerEvent",value:function(t,e,i){var n=$.Event(t);return n.originalEvent&&(n.originalEvent=$.extend({},i)),this.$table.trigger(n,[this].concat(e||[]))}},{key:"generateColumnId",value:function(t){return this.$table.data(r.DATA_COLUMNS_ID)+"-"+t.data(r.DATA_COLUMN_ID)}},{key:"parseWidth",value:function(t){return t?parseFloat(t.style.width.replace("%","")):0}},{key:"setWidth",value:function(t,e){e=e.toFixed(2),e=e>0?e:0,t.style.width=e+"%"}},{key:"constrainWidth",value:function(t){return void 0!=this.options.minWidth&&(t=Math.max(this.options.minWidth,t)),void 0!=this.options.maxWidth&&(t=Math.min(this.options.maxWidth,t)),t}},{key:"getPointerX",value:function(t){return 0===t.type.indexOf("touch")?(t.originalEvent.touches[0]||t.originalEvent.changedTouches[0]).pageX:t.pageX}}]),t}();i["default"]=a,a.defaults={selector:function(t){return t.find("thead").length?r.SELECTOR_TH:r.SELECTOR_TD},store:window.store,syncHandlers:!0,resizeFromBody:!0,maxWidth:null,minWidth:.01},a.count=0,e.exports=i["default"]},{"./constants":3}],3:[function(t,e,i){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var n="resizableColumns";i.DATA_API=n;var s="resizable-columns-id";i.DATA_COLUMNS_ID=s;var r="resizable-column-id";i.DATA_COLUMN_ID=r;var a="th";i.DATA_TH=a;var o="rc-table-resizing";i.CLASS_TABLE_RESIZING=o;var h="rc-column-resizing";i.CLASS_COLUMN_RESIZING=h;var l="rc-handle";i.CLASS_HANDLE=l;var d="rc-handle-container";i.CLASS_HANDLE_CONTAINER=d;var u="column:resize:start";i.EVENT_RESIZE_START=u;var c="column:resize";i.EVENT_RESIZE=c;var f="column:resize:stop";i.EVENT_RESIZE_STOP=f;var E="tr:first > th:visible";i.SELECTOR_TH=E;var v="tr:first > td:visible";i.SELECTOR_TD=v;var $="[data-noresize]";i.SELECTOR_UNRESIZABLE=$},{}],4:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(i,"__esModule",{value:!0});{var s=t("./class"),r=n(s),a=t("./adapter");n(a)}i["default"]=r["default"],e.exports=i["default"]},{"./adapter":1,"./class":2}]},{},[4]);
//# sourceMappingURL=jquery.resizableColumns.min.js.map
</script>
<script>
window.onload = function() {
	(function(){
	 var col_element, next_element, cursorStart = 0, dragStart = false, width, height, th_width, next_width = undefined, next_height, resize, resize_left, table_wt, resizeCheck;
	 var container = document.getElementById("container"),
		 table = document.getElementById("table_resize"),
		 table_th = table.getElementsByTagName("th"),
		 bodyRect = document.body.getBoundingClientRect()
 
	  container.style.position = "relative";
 
	 function mouseDown(){
	   resize = this;
	   resizeCheck = resize.classList.contains("y_resize");
	   var col_index = parseInt(resize.getAttribute("data-resizecol"))-1;
	   col_element = table_th[col_index];
	   next_element = table_th[col_index+1];
	   dragStart = true;
	   cursorStart = (resizeCheck)?event.pageX:event.pageY;
	   var elm_bound = col_element.getBoundingClientRect();
	   width = elm_bound.width;
	   table_wt =table.offsetWidth;
	   if(next_element != undefined){
		 var next_bound = next_element.getBoundingClientRect();
		 next_width = next_bound.width;
	   }
	   resize_left = (this.getBoundingClientRect()).left - bodyRect.left;
	 }
	 function mouseMove(){
	   if(dragStart){
		 var cursorPosition = (resizeCheck)?event.pageX:event.pageY;
		 var mouseMoved = (cursorPosition - cursorStart);
		 var newLeft = resize_left + mouseMoved;
		 var newWidth = width + mouseMoved;
		 var new_nextWidth, new_nextHeight;
		 if(next_element != undefined){
		   new_nextWidth = next_width - mouseMoved;
		 }
		 if(newWidth > 30 && (new_nextWidth > 30 || next_element == undefined)){
		   col_element.style.cssText = "width: "+newWidth+"px;";
		   if(next_element != undefined){
			 next_element.style.cssText = "width: "+new_nextWidth+"px";
		   }
		   else{
			 table.style.width = (table_wt + mouseMoved)+"px";
		   }
		   resize.style.cssText = "left: "+newLeft+"px;";
		 }
	   }
	 }
	 function mouseUp(){
	   if(dragStart){
		  dragStart = false;
	   }
	 }
	 function initEvents(table_th){ 
	   var tb_resize = container.getElementsByClassName("tb_resize");
	   var th_length = table_th.length;
	   for(var i = 0; i<th_length; i++){
		 document.body.addEventListener("mousemove", mouseMove);
		 tb_resize[i].addEventListener("mousedown", mouseDown);
		 tb_resize[i].addEventListener("mouseup", mouseUp);
		 table_th[i].style.width = th_width+"px";
	   }
	 } 
	 function setTdWidth(){
	   var elm_bound = table.getBoundingClientRect();
	   var table_wt = elm_bound.width;
	   var th_length = table_th.length;
	   th_width = table_wt/th_length;
	 }
	 function createResizeDiv(){
	   var cont = document.getElementById("container"); 
	   var th_length = table_th.length;
	   for(var i=1; i<=th_length; i++){
		 var yDiv = document.createElement("div");
		 yDiv.className = "y_resize tb_resize";
		 yDiv.setAttribute("data-resizecol",i);
		 var leftPos = (i*th_width)+0.5;
		 yDiv.style.cssText = "left: "+leftPos+"px;";
		 cont.append(yDiv);
	   }
	 }
	  
	  
	 setTdWidth(table);
	 createResizeDiv();
	 initEvents(table_th);
   })();
 }
</script>
</body>
</html>
