<html>

<head>
	<title>IMS-Segment Master</title>
</head>
<script src='../js/jquery-3.1.1.min.js' type='text/javascript'></script>
<script src='../js/jquery-ui.min.js' type='text/javascript'></script>
<link href="../css/style.css" rel="stylesheet" />
<link href="../css/style1.css" rel="stylesheet" />
<link href='../css/jquery-ui.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/all.css">
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<!--link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,800' rel='stylesheet' type='text/css'-->
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script-->
<!--script src="../js/jquery.min.js"></script-->
<script type="text/javascript" src="../js/jquery.placeholder.label.js"></script>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font-family: 'Open Sans', sans-serif;
	}
	.top {
		width: 100%;
		background-color: #F05858;
		color: #fff;
	}
	.content {
		max-width: 100%;
		margin: 0 auto;
	}
	.top .content {
		padding-top: 0px;
		padding-bottom: 0px;
		font-weight: 300;
		font-size: 30px;
	}
	.top .content .compatibility {
		float: right;
		text-align: center;
		margin-top: 0px;
	}
	.compatibility .text {
		font-size: 15px;
		margin: 10px;
	}
	h1 {
		margin-top: 20px;
		font-weight: 800;
		color: #4E4E4E;
	}
	h2 {
		font-size: 18px;
		font-weight: 800;
		color: #4E4E4E;
	}
	form {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	input {
		border: 1px solid #ccc;
		padding: 10px;
		outline: none;
		font-size: 14px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 30px;
		width: 10%;
		margin: 2px;
	}
	.clr {
		clear: both;
	}
	code, samp, kbd {
		font-family: "Courier New", Courier, monospace, sans-serif;
		text-align: left;
		color: #555;
	}
	pre code {
		line-height: 1.6em;
		font-size: 11px;
	}
	pre {
		padding: 0.1em 0.5em 0.3em 0.7em;
		border-left: 11px solid #ccc;
		margin: 1.7em 0 1.7em 0.3em;
		overflow: auto;
		width: 93%;
		text-align: left;
		font-size: 14px;
		background-color: #4E4E4E;
		color: #fff;
	}
	/* target IE7 and IE6 */
	*:first-child+html pre {
		padding-bottom: 2em;
		overflow-y: hidden;
		overflow: visible;
		overflow-x: auto; 
	}
	* html pre { 
		padding-bottom: 2em;
		overflow: visible;
		overflow-x: auto;
	}
	img.author {
		border-radius: 50%;
		border: 3px solid #ffffff;
		-webkit-box-shadow: 0 0 4px 1px #BDBDBD;
		box-shadow: 0 0 4px 1px #BDBDBD;
		float: left;
		margin-right: 10px;
		margin-bottom: 20px;
	}
	.compatibility .nagegator {
		font-size: 11px;
		float: left;
		margin: 5px;
	}
	.subtitle {
		font-size: 18px;
	}
</style>
<style>
/*
    .roundedCategory {
        border-top-left-radius: 2rem !important;
        border-bottom-left-radius: 2rem !important;
        border-top-right-radius: 2rem !important;
        border-bottom-right-radius: 2rem !important;
         border-color: light-blue;
 
    }
    */
    body {
        margin: 0;
        font-family: 'Tahoma';
    }
    table {
    border-spacing: 0;
    }
    th, td {
        padding: 0.5em 1em;
    }
    thead tr:first-child th:first-child {
        border-radius: 0.8em 0 0 0;
    }
    thead tr:first-child th:last-child {
        border-radius: 0 0.8em 0 0;
    }
    tbody tr:last-child td:first-child {
        border-radius: 0 0 0 0.6em;
    }
    tbody tr:last-child td:last-child {
        border-radius: 0 0 0.8em 0;
    }
    .top {
        padding: 3em;
        display: grid;
        grid-gap: 3em;
        grid-template-columns: repeat(4, 250px);
        .quote {
            padding: 3em;
            border-radius: .3em;
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
            p {
                margin-top: 0;
            }
            span {
                font-weight: bold;
                position: relative;
                margin-left: 20px;
                &:before {
                    content: '';
                    position: absolute;
                    height: 1px;
                    width: 20px;
                    border-bottom: 1px solid black;
                    top: 20px;
                }
            }
        }
    }
      
    @media(min-width:950px) {
        .top {
            grid-template-columns: repeat(4, 1fr);
        }
    }
</style>
<style>
.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-radius: 35px;
  border: 2px solid rgba(0, 70, 147, 0.75);
}
.btn-success {
  color: #fff;
  background-color: #28a745;
  border-radius: 35px;
  border: 1px solid rgba(21, 87, 36, 0.75);
}
.btn-secondary {
  color: #fff;
  background-color: #868e96;
  border-radius: 35px;
  border: 1px solid rgba(134, 142, 150, 0.75);
}
.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-radius: 35px;
  border: 1px solid rgba(23, 162, 184, 0.75);  
}
.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
  border-radius: 35px;
  border: 1px solid rgba(52, 58, 64, 0.75);    
}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-radius: 35px;
  border: 1px solid rgba(220, 53, 69, 0.75);      
}
.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-radius: 35px;
  border: 1px solid rgba(255, 193, 7, 0.75);    
}
.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  border-radius: 35px;
  border: 1px solid rgba(248, 249, 250, 0.75);     
}
</style>
<body>
	<nav class="navbar navbar-default" style = "background-color: #007bff; height : 60px;">		
		<h1 style="color:white; font-size:24px;" class="text-primary" align="center">Segment Master</h1>
		<a href="../main/index.php" style = "font-size:24px; margin-top :-50px; color:white;" class="navbar-brand">Home</a>
		<a href="javascript:void(0);"onclick="exportToExcel('tblexportData', 'Export-data')" style = "font-size:24px; margin-top :-50px; margin-left :70px; color:white;" class="navbar-brand"> | </a>
		<a href="javascript:void(0);"onclick="exportToExcel('tblexportData', 'Export-data')" style = "font-size:24px; margin-top :-50px; margin-left :85px; color:white;" class="navbar-brand"> Export to Excel</a>
		<h1 style="color:white; font-size:24px;margin-top :-40px;margin-right :20px;" class="text-primary" id="demo2" align="right"></h1>
	</nav>	
	<div class="container" style = "width:50%;">
	<center>
		<tr>
			<label for="ex3" style="font-size:18px; font-weight:bold;">segment_name</label>
			<input type="text" id="segment_name" name="segment_name" class="roundedCategory" style="font-size:18px; width:100%; height: 40px; font-weight:bold; color: #000066;" placeholder="" oninput="this.value = this.value.toUpperCase()" autofocus autocomplete="off" required>
			<!--input size="50" type="segment_name" style="font-size:18px; font-weight:bold;" name="segment_name" class="form-control inputstl" id="segment_name" autofocus autocomplete="off" required-->
		<tr>
	</center>
	<div style="margin-top : 10px; " align="center">
		<input type="hidden" name="user_id" id="user_id" />
		<button type="button" name="action" id="action" style="width : 200px; height: 50px;" class="btn btn-primary">Add</button>
	</div>
	</div>
	<div class="container" style = "width:50%;">
	    <center>
			<tr>
			    <input style ="margin-left : 0px; width : 100%; height:40px; font-size:20px; font-weight:bold;" name="search_text" id="search_text" type="text" placeholder="search" alt="search">
			<tr>
		</center>
	</div>
	<div style="margin-top : 0px; margin-left : 0px; height:40%; margin-left: 0px; margin-top: 0px; overflow:auto;" id="result" class="table-responsive"  align="center"></div>
	<div style="height: 60px; margin-left:0px; margin-top:0px; font-size:30px;" class="success"></div>
	<div style="height: 60px; margin-left:0px; margin-top:0px; font-size:30px;" class="error"></div>
</body>
<center>
<!--div style="margin-left : 30px; font-size:35px; color:blue; margin-right : 30px;">
This is Segment / Group master entry page. You can add & Export the Segment details to Excel. You can also Search the Segment.
</div-->
</center>
</html>
<!--script src='js/app.js' type='text/javascript'></script-->
<?php
	$date = new DateTime();
	$current_timestamp = $date->getTimestamp();
?>
<script>
	$(document).keydown(function(objEvent) {
		if (objEvent.keyCode == 9) {
			objEvent.preventDefault();
		}
	})
	flag_time = true;
	timer = '';
	setInterval(function(){phpJavascriptClock();},1000);
	
	function phpJavascriptClock()
	{
		if ( flag_time ) {
		timer = <?php echo $current_timestamp;?>*1000;
		}
		var d = new Date(timer);
		months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
		
		month_array = new Array('January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'Augest', 'September', 'October', 'November', 'December');
		
		day_array = new Array( 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
		
		currentYear = d.getFullYear();
		month = d.getMonth();
		var currentMonth = months[month];
		var currentMonth1 = month_array[month];
		var currentDate = d.getDate();
		currentDate = currentDate < 10 ? '0'+currentDate : currentDate;
		
		var day = d.getDay();
		current_day = day_array[day];
		var hours = d.getHours();
		var minutes = d.getMinutes();
		var seconds = d.getSeconds();
		
		var ampm = hours >= 12 ? 'PM' : 'AM';
		hours = hours % 12;
		hours = hours ? hours : 12; // the hour ’0′ should be ’12′
		minutes = minutes < 10 ? '0'+minutes : minutes;
		seconds = seconds < 10 ? '0'+seconds : seconds;
		var strTime = hours + ':' + minutes+ ':' + seconds + ' ' + ampm;
		timer = timer + 1000;
		document.getElementById("demo2").innerHTML='Date : ' + currentDate+'-' +(month+1)+'-' +currentYear + ' Time : ' + strTime ;
		flag_time = false;
	}

</script>
<script>
	$(document).ready(function() {
		load_data();

		function load_data(query) {
			$.ajax({
				url: "search.php",
				method: "post",
				data: {
					query: query
				},
				success: function(data) {
					$('#result').html(data);
					$('#segment_name').val('');
					//$('#segment_name').focus();
				}
			});
		}
		function load_data1(query){
			$.ajax({
				url:"search.php",
				method:"post",
				data:{query:query},
				success:function(data)
				{
					$('#result').html(data);				
				}
			});
		}
		$('#search_text').keyup(function() {
			var search = $(this).val();
			if (search !== '') {
				load_data1(search);
			} else {
				load_data();
			}
		});
		$('#action').click(function() {
			var segment_name = $('#segment_name').val();
			var id = $('#user_id').val();
			var action = $('#action').text();
			$actiontext = $('#action').text();
			if (segment_name != '') {
				$.ajax({
					url: "action.php",
					method: "POST",
					data: {
						segment_name: segment_name,
						id: id,
						action: action
					},
					success: function(data) {
						$('.success').show(1000).html("Record Saved Successfully.").delay(1000).fadeOut(1000);
						load_data();
					}
				});
			} else {
				$('.success').show(1000).html("All Fields are Required").delay(1000).fadeOut(1000);
			}
		});

		$(document).on('click', '.update', function() {
			var id = $(this).attr("id");
			$.ajax({
				url: "fetch.php",
				method: "POST",
				data: {
					id: id
				},
				dataType: "json",
				success: function(data) {
					$('#action').text("Update");
					$('#user_id').val(id);
					$('#segment_name').val(data.segment_name);
				}
			})
		});
		$(document).on('click', '.delete', function() {
			var id = $(this).attr("id");
			if (confirm("Are you sure you want to remove this data?")) {
				var action = "Delete";
				$.ajax({
					url: "action.php",
					method: "POST",
					data: {
						id: id,
						action: action
					},
					success: function(data) {
						$('.success').show(1000).html("Record Deleted Successfully.").delay(1000).fadeOut(1000);
						load_data();
					}
				})
			} else {
				return false;
			}
		});
		$(document).ready(function() {
			$('input').on('keypress', function(e) {
				if (e.which == 13) {
					switch ($(this).attr('id')) {
						case 'segment_name':
							if (!document.getElementById("segment_name").value.length == 0) {
								$('#action').focus();
								e.preventDefault();
								break;
							}
					}
				}
			});
		});
	});
</script>
<script type="text/javascript">
	function exportToExcel(tableID, filename = '') {
		var downloadurl;
		var dataFileType = 'application/vnd.ms-excel';
		var tableSelect = document.getElementById(tableID);
		var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
		filename = filename ? filename + '.xls' : 'export_excel_data.xls';
		downloadurl = document.createElement("a");
		document.body.appendChild(downloadurl);
		if (navigator.msSaveOrOpenBlob) {
			var blob = new Blob(['\ufeff', tableHTMLData], {
				type: dataFileType
			});
			navigator.msSaveOrOpenBlob(blob, filename);
		} else {
			downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
			downloadurl.download = filename;
			downloadurl.click();
		}
	}
</script>