<?php
	require_once "header.php";
	const SIDEBAR_ITEMS = SIMULATOR_HEADER_ITEMS;
	const SIDEBAR_LINKS = SIMULATOR_HEADER_LINKS;
	require_once "sidebar.php";
?>

<section data-heading="Simulator" class="content-wrapper" id="simulator">
	<!--Heading-->
	<div class="title-box">
		<h1 class="page-title">Simulator</h1>
		<p class="page-description">
			Replay recorded data for demonstration or diagnostic purposes.
			Inputs must be set as they were when data was recorded.
		</p>
	</div>

    <!--Simulator-->
    <div class="box top-wrapper">
		<div class="flex-row">
            <div class="flex-half">
                <h2>Use Simulated Data?</h2>
                <input type="checkbox" class="database-input" data-section="SimulatedData" id="use-simulated-data"
                    data-key="ReadSimulatedData" <?php echo (readDB("SimulatedData", "ReadSimulatedData")?"checked":"")?>>
            </div>
            <select id="simulated-select" class="database-input"
                data-section="SimulatedData" data-key="SimulatedDataFile">
                <option value="" >Select Simulated Data</option>
                <?php
                    $selected = readDB("SimulatedData", "SimulatedDataFile");
                    $directory = array_filter(scandir("logs/DataLogs"), function($file) {
                        return !( substr($file, 0, 1) == '.' ) && ( substr($file, -4) === '.log');
                    });
                    foreach ($directory as $index => $file) {
                        echo '
                            <option value="' . $file . '" ' . (($file == $selected)?"selected":"") . '>
                                ' . explode(".", $file)[0] . '
                            </option>
                        ';
                    }
                ?>
            </select>
            <div class="flex-heading">
                <h2>Or</h2>
            </div>
		</div>
		<div class="flex-row">
			<div class="flex-half">
			
			</div>
			<div class="flex-half">
				<form action="" method="post" enctype="multipart/form-data" id="upload-form">
					<input type="file" name="fileToUpload" id="fileToUpload">
					<input type="submit" class="button gray medium" value="Upload"
						name="uploadSoftware" id="upload-button" style="float:right">
				</form>
			</div>
		</div>
	</div>

    <!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box">
			<a id="ok-button" class="button gray medium">OK</a>
			<a id="cancel-button" class="button gray medium">Cancel</a>
			<a id="apply-button" class="button gray medium">Apply</a>
		</div>
	</div>
</section>

<?php require_once "footer.php"; ?>

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

    var pageHandler = new InputPageHandler('simulator.php', 'accelerometer');

    $('#upload-form').submit(function(e) {
		e.preventDefault();
		if ( $('#fileToUpload').prop('files').length == 0 ) {
			$('#dialog-text').text('Please select simulation file to upload.');
			$('#dialog').dialog( {
				title: "No File",
				buttons: {
					Ok : function() {
						$(this).dialog("close");
					}
				}
			}).dialog( "open" );
		} else {
			var formData = new FormData( this );
            formData.append('action', 'Simulation');
			$.ajax( {
				url: 'upload.php',
				type: 'POST',
				data: formData,
				processData: false,
				contentType: false,
				cache: false,
				success: function(response) {
                    writeSingle("SimulatedData", "SimulatedDataFile", $('#fileToUpload').val().split(/(\\|\/)/g).pop(), "accelerometer");
                    alert(response);
					location.reload();
				}
			});
		}
    });
    
});
</script>