<?php
		include_once 'include/connection.php'; 
    
$query = "
SELECT clientID,clientName FROM client_tbl
ORDER BY clientName ASC
";

$result = $link->query($query);

$query1 = "
    SELECT dID,deviceName FROM device_tbl
    ORDER BY deviceName ASC
";

$result1 = $link->query($query1);

$query2 = "
    SELECT * FROM fleet_view
    ORDER BY No ASC
";

$result2 = $link->query($query2);
?>

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet">
   
	<link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
	<!-- <link type="text/css" href="css/theme.css" rel="stylesheet"> -->
	<link type="text/css" href="images/icons/css/font-awesome.css" rel="stylesheet">
	<link type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet'>
	<link href="assets/css/dashboard.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <!-- <script src="search1.js" type="text/javascript"></script>
    <script src="search.js" type="text/javascript"></script>  -->

	<link type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet'>
  	<!-- <script src="https://code.jquery.com/jquery-3.5.1.js"/>
	<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"/> -->
	<script src="search.js"/>
	<script src="search1.js"/>
  
<script language="javascript" type="text/javascript">
var popUpWin=0;
function popUpWindow(URLStr, left, top, width, height)
{
 if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
popUpWin = open(URLStr,'popUpWin', 'toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width='+600+',height='+600+',left='+left+', top='+top+',screenX='+left+',screenY='+top+'');
}

</script>
</head>
<body>

	<div class="container-fluID"> 
		<div class="row">
        	<div class="col-sm-12">
            	<center>
                	<div class="alert alert-success" role="alert">
                    	<h2><span class="badge badge-secondary">CREATE Devices </span></h2>
                        	DASHBOARD
                	</div>
            	</center>   
				<button class="btn btn-info approve" data-toggle="modal" type="button" >Devices </button>
				
            <div class="module-body table">
			  	<div class="form-group">
        			<div class="modal fade" id="approve_modal" aria-hidden="true">
						<form method="POST" action="">
                			<div class="modal-header alert-success">
                    			<h3>Add Device </h3>
                			</div>
							<div class="modal-body ">    
                            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
                    <tr><td><label for="client" class="form-label">Client </label></td></tr>
                    <tr><td><select name="select_box" class="form-select" id="select_box">
                        <option value="">Select client</option>
                        <?php 
                        foreach($result as $row)
                        {
                            echo '<option value="'.$row["clientID"].'">'.$row["clientName"].'</option>';
                        }
                        ?>  
                    </select></td></tr>
                </div>
                <!-- <div class="col-md-3">&nbsp;</div> -->
            </div>      
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
                <tr></td><label for="device" class="form-label">Device </label></td>
                <tr></td><select name="select_box1" class="form-select" id="select_box1">
                    <option value="">Select device</option>
                        <?php 
                        foreach($result1 as $row1)
                        {
                            echo '<option value="'.$row1["dID"].'">'.$row1["deviceName"].'</option>';
                        }
                        ?>  
                    </select></td></tr>
                </div>
                <!-- <div class="col-md-3">&nbsp;</div> -->
            </div>  
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
                <label for="email" class="form-label">plateNo </label>
                    <input type="plateNo" class="form-control"  name="plateNo" value="" required/>
                </div>
                <!-- <div class="col-md-3">&nbsp;</div> -->
            </div>  
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
                <label for="email" class="form-label">Cost </label>
                    <input type="integer" class="form-control" name="cost" value=""/>
                </div>
                <!-- <div class="col-md-3">&nbsp;</div> -->
            </div>  
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
                <label for="email" class="form-label">InstallDate </label>
                    <input type="integer" class="form-control" name="installDate" required value=""/>
                </div>
                <!-- <div class="col-md-3">&nbsp;</div> -->
            </div>  
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
					<input type="submit" class="btn btn-primary" name="submit" value="allocate" />
                </div>
                <!-- <div class="col-md-3">&nbsp;</div> -->
            </div> 
                			</div>
							<div style="clear:both;"></div>
							<div class="modal-footer">
								<button class="btn btn-danger" type="button" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
							</div>
						</form>
	    			</div>
				</div>
			</div>


	<table id="example" cellpadding="0" cellspacing="0" border="0" class="datatable-1 table table-bordered table-striped	 display" width="100%">
		<thead>
			<tr>
				<th scope="col-sm-2">dID</th>
				<th scope="col">deviceName </th>
				<th scope="col">condition </th>
				
			</tr>
		</thead> 
			<tbody>
			  	<?php		  
					$result = mysqli_query($link,"select * from device_tbl" );
						while($row = mysqli_fetch_array($result)) {
				?>

				<tr>
				 <td><?php echo $row['dID']; ?></td>
				 <td><?php echo $row['deviceName']; ?></td>
				 <td><?php echo $row['condition']; ?></td>
				 
					<?php  }  ?>

				</tr>
			</tbody>
	</table>
  			</div>
  		</div>
	</div>
</div>
		
  	<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
	<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="scripts/flot/jquery.flot.js" type="text/javascript"></script>
	<script src="scripts/datatables/jquery.dataTables.js"></script>

	<script>
    $(document).ready(function() {
        var table = $('#example').DataTable( {
            lengthChange: false,
            buttons: [ 'excel']
        } );
     
        table.buttons().container()
            .appendTo( '#example_wrapper .col-sm-6:eq(0)' );
    } );
	</script>

  	<script>
	$(document).ready(function () {
    $('#example').DataTable({
        columnDefs: [
            {
                targets: [0],
                orderData: [0, 1],
            },
            {
                targets: [1],
                orderData: [1, 0],
            },
            {
                targets: [4],
                orderData: [4, 0],
            },
        ],
    });
});

</script>
<script>
	$(document).ready(function(){
		$('.approve').on('click',function(){
		$('#approve_modal').modal('show');
		$tr = $(this).closest('tr');
		var data = $tr.children("td").map(function(){ 
			return $(this).text();
		}).get();
			console.log(data);
			$('#H').val(data[0]);
		});
	});
	</script> 
  
    <script src="library/dselect.js"></script>
  <script>

var select_box_element = document.querySelector('#select_box');

dselect(select_box_element, {
    search: true
});

</script>
<script>

var select_box_element1 = document.querySelector('#select_box1');

dselect(select_box_element1, {
    search: true
});

</script>

</body>
</html>