<!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">
        <?php include __DIR__.'/../../components/navigation.php'; ?>

        <div id="layoutSidenav">
            <div id="layoutSidenav_nav">
                <!-- Sidebar -->
                <?php renderSidebar(); ?>
            </div>
            </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>Soil Analysis</h3>
                                    <p>Variables used in Soil Analysis recommendation programs.</p>
                                    <div class="tab-content">
                                        <!-- Company Product list here -->    

                                        [[!companySoilRecomendations]]

                                    </div>
                                </div>



                                <div class="bs-example2 bs-example-padded-bottom">
                                    <button type="button" class="btn btn-primary btn-lg btn-warning " data-toggle="modal" data-target="#myModal">
                                        Add Soil Recommendation
                                    </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>