<!doctype html>
<html lang="en">

<head>
	<title>[[*longtitle]] | [[++site_name]]</title>
	<base href="[[!++site_url]]">
	<meta charset="[[++modx_charset]]">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="keywords" content="[[*introtext]]">
	<meta name="description" content="[[*description]]">
	<link rel="icon" href="client-assets/images/favicon.ico?v=2" type="image/x-icon"> [[!Profile]]
	
	<script type="text/javascript">
    	window.dataLayer = window.dataLayer || [];
    
    	function gtag() {
    		dataLayer.push(arguments);
    	}
    	gtag('js', new Date());
    	gtag('set', {
    		'user_id': '[[+modx.user.id]]'
    	}); // Set the user ID using signed-in user_id.
    	gtag('config', 'UA-133963301-1');
	</script>
	
	<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
	<link href="client-assets/css/dashboard-2021.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
	<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
	<script src="client-assets/js/skycons.js"></script>
	<style>
    	.btn-append {
    		color: #495057;
    		background-color: #e9ecef;
    		border: 1px solid #ced4da;
    	}
    	.footer {
    		position: absolute;
    		bottom: 0;
    		width: 100%;
    		height: 60px;
    		line-height: 60px;
    	}
	</style>
</head>

<body class="sb-nav-fixed" id="page-top"> 
    [[!Personalize?
        &yesChunk=`navHeaderLogged`
        &noChunk=`navHeader`
        &allowedGroups=`basicClients,bacicAdmin,companyClients,companyManagers`
    ]]
    
	<div id="layoutSidenav">
	    <div id="layoutSidenav_nav">
    		<!-- Sidebar -->
    		[[Wayfinder?
    		    &startId=`2` 
        		&displayStart=`0` 
        		&startitemTpl=`startitemTpl` 
        		&selfClass=`show` 
        		&level=`2`
        		&outerTpl=`outer`
        		    &outerClass=`sb-sidenav accordion sb-sidenav-dark`
        		&rowTpl=`row`
        		    &rowClass=`nav-link`
        		&parentRowTpl=`parentRow`
        		    &parentClass=`nav-link collapsed`
        		&innerTpl=`inner`
        		    &innerClass=`collapse`
        		&innerRowTpl=`secondInner`
        		    &innerRowClass=`nav-link`
    		]]
        </div>
		
		<div id="layoutSidenav_content">
			<main>

				<div class="container-fluid px-4">
				    <h1 class="mt-4">[[*pagetitle]]</h1>

					<ol class="breadcrumb mb-4"> [[$dash-breadcrumbs]] </ol>
					
					<div class="row">
					    <div class="grid-form">
    <!---->
    <div class="grid-form1">
        <h3>Company Product Analysis</h3>
        <p>Products used in Soil Analysis recommendation programs.</p>
        <div class="tab-content">
        <!-- Company Product list here -->    
        
        <?php
$result    = null;

$modx_user = $modx->user->get('id');
?>
<table class="table table-bordered">
<tbody>
    <tr>
        <th class='col-20'>ID</th>
        <th class='col-20'>Product</th>
        <th class='col-20'>Chemical</th>
        <th class='col-20'>N</th>
        <th class='col-20'>P</th>
        <th class='col-20'>K</th>
        <th class='col-20'>Na</th>
        <th class='col-20'>Ca</th>
        <th class='col-20'>Mg</th>
        <th class='col-20'>B</th>
        <th class='col-20'>Zn</th>
        <th class='col-20'>Cu</th>
        <th class='col-20'>Mn</th>
        <th class='col-20'>Fe</th>
        <th class='col-20'>Co</th>
        <th class='col-20'>Mo</th>
    </tr>

<?php
//Database connection
//$con = mysqli_connect("localhost", "root", "R3M0T31", "cropmonitor");
$con = mysqli_connect("localhost", "cropmonitor", "brvnCcaEYxlPCS3", "cropmonitor");

// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

// Get results from database 
$result = mysqli_query($con, "SELECT * FROM `fertiliser_specifications` WHERE `modx_user_id` = " . $modx_user . " ");
                                 //

if ($result === FALSE) {
    die(mysqli_error($con)); // TODO: better error handling
    echo "User Profile incorrect";
} else {
    while ($row = mysqli_fetch_array($result)) {
        
        $id = $row['id'];
        $modx_user = $row['modx_user_id'];
?>

        <tr>
        <td class='left'><?php echo $row['id']; ?> </td>
        <td class='left'><b><?php echo $row['name']; ?></b></td>
        <td class='left'><?php echo $row['chemical']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'n','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['n']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'p','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['p']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'k','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['k']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Na','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Na']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Ca','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Ca']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Mg','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Mg']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'B','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['B']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Zn','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Zn']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Cu','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Cu']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Mn','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Mn']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Fe','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Fe']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Co','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Co']; ?></td>
        <td contenteditable='true' onBlur="updateDatabase(this,'Mo','<?php echo $id; ?>')" onClick='showEdit(this);' class='left'><?php echo $row['Mo']; ?></td>
        </tr>


<?php
    }
}

mysqli_close($con);
?>

    </tbody>
</table>

<script type="text/javascript">
    function showEdit(editableObj) {
        $(editableObj).css("background", "#97e499");
    }
    function updateDatabase(editableObj, column, id) {
        $(editableObj).css("background", "#FDFDFD");
        $.ajax({
            url: "[[~57]]",
            type: "POST",
            data: 'column=' + column + '&editval=' + editableObj.innerHTML + '&id=' + id,
            success: function (data) {
                $(editableObj).css("background", "white");
            }
        });
    }
</script>
?>
            
        </div>
    </div>
    
<div class="bs-example2 bs-example-padded-bottom">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Add Product
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h2 class="modal-title">Add New Product</h2>
                </div>
                    <div class="modal-body">
                		<form method="post" action="" id="newClientDetails" >
                		<div class="grid-form">
                		    <input type="hidden" class="form-control" name="m_user" id="m_user" value="[[+modx.user.id]]" required>
                		        <input type="hidden" class="form-control" name="modx_user_attributes" id="modx_user_attributes" value="[[+modx.user.id]]" required>
                		    <div class="form-horizontal">
                    		    <div class="form-group">
                    		    <label class="sr-only" for="name">Product:</label>
                    		        <input type="text" class="form-control" name="name" placeholder="Product Name" id="name" required >
                                </div>
                                <div class="form-group">
                    		    <label class="sr-only" for="chemical">Chemical Symbol:</label>
                    		        <input type="text" class="form-control" name="chemical" placeholder="Chemical" id="chemical"  >
                    		    </div>
                		    </div>
                		    <div class="form-horizontal">
                    		    <div class="form-group">
                    		        <label class="sr-only" for="N">Nitrogen - N</label>
                    		        <input type="email" class="form-control" name="N" placeholder="Nitrogen" required id="N"  >
                                </div>
                                <div class="form-group">
                    		        <label class="sr-only" for="P">Phosphorus - P</label>
                    		        <input type="text" class="form-control" name="P" placeholder="Phosphorus" id="P"  >
                                </div>
                		    </div>
                		    <div class="form-horizontal">
                    		    <div class="form-group">
                    		        <label class="sr-only" for="k">Postassium - K</label>
                    		        <input type="text" class="form-control" name="K" placeholder="Postassium" id="K" >
                                </div>
                                <div class="form-group">    
                    		        <label class="sr-only" for="Na">Sodium - Na</label>
                    		        <input type="text" class="form-control" name="Na" placeholder="Sodium" id="Na" >
                                </div>
                		    </div>
                		    <div class="form-horizontal">
                    		    <div class="form-group">
                    		        <label class="sr-only"for="Ca">Calcium - Ca</label>
                    		        <input type="text" class="form-control" name="Ca" placeholder="Calcium" required id="Ca"  >
                                </div>
                                <div class="form-group">                    		        
                    		        <label class="sr-only" for="Mn">Magnesium - Mg</label>
                    		        <input type="text" class="form-control" name="Mg" placeholder="Magnesium" required id="Mg"  >
                    		    </div>
                		    </div>
                		    <div class="form-horizontal">
                    		    <div class="form-group">
                    		        <label class="sr-only" for="B">Boron - B</label>
                    		        <input type="text" class="form-control" name="B" placeholder="Boron" id="B" >
                                </div>
                                <div class="form-group">    
                    		        <label class="sr-only" for="Zn">Zinc - Zn</label>
                    		        <input type="text" class="form-control" name="Zn" placeholder="Zinc" id="Zn" >
                                </div>
                		    </div>
                		    <div class="form-horizontal">
                    		    <div class="form-group">
                    		        <label class="sr-only" for="Cu">Copper - Cu</label>
                    		        <input type="text" class="form-control" name="Cu" placeholder="Copper" id="Cu" >
                                </div>
                                <div class="form-group">    
                    		        <label class="sr-only" for="Mn">Manganese - Mn</label>
                    		        <input type="text" class="form-control" name="Mn" placeholder="Manganese" id="Mn" >
                                </div>
                            </div>
                            <div class="form-horizontal">
                    		    <div class="form-group">
                    		        <label class="sr-only" for="Fe">Iron - Fe</label>
                    		        <input type="text" class="form-control" name="Fe" placeholder="Iron" id="Fe" >
                                </div>
                                <div class="form-group">    
                    		        <label class="sr-only" for="Co">Colbalt - Co</label>
                    		        <input type="text" class="form-control" name="Co" placeholder="Colbalt" id="Co" >
                                </div>
                		    </div>
                		    <div class="form-horizontal">
                    		    <div class="form-group">
                    		        <label class="sr-only" for="M0">Molybdenum - Mo</label>
                    		        <input type="text" class="form-control" name="Mo" placeholder="Molybdenum" id="Mo" >
                                </div>
                            </div>
                         </div>
                        </form>
                	</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
           
           
</div>
					</div>

				</div>

			</main>
			
			<footer class="py-4 bg-light mt-auto">
                <div class="container-fluid px-4">
                    <div class="d-flex align-items-center justify-content-between small">
                        <div class="text-muted">[[SimpleCopyright? &startYear=`2003`]]. All Rights Reserved <a href="[[~1]]"></a></div>
                        <div>
                            <a href="[[~39~]]">Privacy Policy</a>
                            &middot;
                            <a href="[[~39~]]">Terms &amp; Conditions</a>
                        </div>
                    </div>
                </div>
            </footer>
            
		</div>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
	<script>
    	/*!
            * Start Bootstrap - SB Admin v7.0.3 (https://startbootstrap.com/template/sb-admin)
            * Copyright 2013-2021 Start Bootstrap
            * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
            */
            // 
        // Scripts
        // 
        
        window.addEventListener('DOMContentLoaded', event => {
        
            // Toggle the side navigation
            const sidebarToggle = document.body.querySelector('#sidebarToggle');
            if (sidebarToggle) {
                // Uncomment Below to persist sidebar toggle between refreshes
                // if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
                //     document.body.classList.toggle('sb-sidenav-toggled');
                // }
                sidebarToggle.addEventListener('click', event => {
                    event.preventDefault();
                    document.body.classList.toggle('sb-sidenav-toggled');
                    localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
                });
            }
        
        });

	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
</body>
</html>