<!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]]" >

        [[!Profile]]

        <link rel="icon" href="client-assets/images/favicon.ico?v=2" type="image/x-icon" >

        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" rel="stylesheet" type="text/css" />
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" integrity="sha256-PF6MatZtiJ8/c9O9HQ8uSUXr++R9KBYu4gbNG5511WE=" crossorigin="anonymous" rel="stylesheet" type="text/css"  />

        <link type="text/css" href="/client-assets/weather-icons/css/weather-icons.min.css?version=1.16" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="https://use.fontawesome.com/1e2844bb90.js"></script>

        <link href="/client-assets/css/dashboard.css" rel="stylesheet" type="text/css" />
        <script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>
        <link href="https://unpkg.com/gijgo@1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
        <script src="client-assets/js/skycons.js" type="text/javascript"></script>

        <link href="client-assets/home/css/graphing.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="client-assets/home/css/alux.min.css" rel="stylesheet" type="text/css" media="screen" />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <style>
            @media print {
                @page {
                    size: A4 portrait;
                }
                @page :left {
                    margin-left: 0.5cm;
                }
                @page :right {
                    margin-right: 0.5cm;
                }
                @page :top {
                    margin-top: 0cm;
                }
                @page :bottom {
                    margin-bottom: 0cm;
                }
            }
        </style>

    </head>
    <body>

        <div class="container">
            <div class="row">
                <?php
                // Replace Logo with Customer Logo if supplied.
                $client = '';

                echo "<div class='col-md-3'>";
                if ($client === "") {
                    echo "<img class='img-fluid' src='client-assets/images/crop-monitor.png'  alt='Crop Monitor' >";    
                } else {
                    echo "<img class='img-fluid' src='client-assets/images/crop-monitor.png'  alt='Crop Monitor' >";
                }

                //echo "<span class='col'></span>";


                //Client Test Description
                if ($client === "") {
                    echo "";    
                } else {
                    echo "<img class='img-fluid' src='client-assets/images/crop-monitor.png'  alt='Crop Monitor' >";
                }
                echo "</div>";

                echo "<div class='col-md-9'></div>";
                ?>
            </div>

            <?php
            $result    = null;

            $client_id = (int) (isset($_GET["cid"])) ? $_GET["cid"] : ""; // client number
            $record_id = (float) (isset($_GET["rid"])) ? $_GET["rid"] : ""; // record number
            $rand_id = (float) (isset($_GET["rand"])) ? $_GET["rand"] : "";

            $today = date('jS F Y');

            //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 `soil_records` WHERE `id` = '" . $record_id . "' AND `rand` = '" . $rand_id . "' ");

            if ($result === FALSE) {
                die(mysqli_error($con)); // TODO: better error handling
                echo "User Profile incorrect";
            } else {
                while ($row = mysqli_fetch_array($result)) {

                    //TEST
                    $client     = $row['client_name'];
                    $address    = $row['site_address'];
                    $state      = $row['state_postcode'];
                    $email      = $row['email'];
                    $labNo      = $row['lab_no'];
                    $sampleDate = $row['date_sampled'];
                    $sample     = $row['site_id'];
                    $crop       = $row['sample_id'];

                    if ($rand_id === NULL) { //if element not tested hide row

                    } else {
            ?>

            <table class='title'>
                <tbody>
                    <tr>
                        <th class='col-20'></th>
                        <th class='col-20'></th>
                        <th class='col-20'></th>
                        <th class='col-20'></th>
                        <th class='col-20'></th>
                    </tr>
                    <tr>
                        <td class='right'><b>DATE:</b></td>
                        <td class='left'><?php echo $today; ?></td>
                        <td></td>
                        <td class='right'><b>SAMPLE ID:</b></td>
                        <td class='left'><?php echo $sample; ?></td>
                    </tr>
                    <tr>
                        <td class='right'><b>CLIENT:</b></td>
                        <td class='left'><?php echo $client; ?></td>
                        <td></td>
                        <td class='right'><b>DATE SAMPLED:</b></td>
                        <td class='left'><?php echo $sampleDate; ?></td>
                    </tr>
                    <tr>
                        <td class='right'><b>ADDRESS:</b></td>
                        <td class='left'><?php echo $address; ?></td>
                        <td></td>
                        <td class='right'><b>LAB NUMBER:</b></td>
                        <td class='left'><?php echo $labNo; ?></td>
                    </tr>
                    <tr>
                        <td class='right'><b> </b></td>
                        <td class='left'><?php echo $state; ?></td>
                        <td></td>
                        <td class='right'><b>CROP:</b></td>
                        <td class='left'><?php echo $crop; ?></td>
                    </tr>
                    <tr>
                        <td class='right'><b> </b></td>
                        <td class='left'><?php echo $email; ?></td>
                        <td></td>
                        <td class='right'></td>
                        <td class='left'></td>
                    </tr>
                </tbody>
            </table>

            <?php
                    }
                }
            }

            mysqli_close($con);


            /* 
			<div class="row pt-3">
				<div class="col-md-2 text-right"><b>DATE:</b></div>
				<div class="col-md-3 text-left"><?php echo $today; ?></div>
				<div class="col-md-1"></div>
				<div class="col-md-3 text-right"><b>SAMPLE ID:</b></div>
				<div class="col-md-3 text-left"><?php echo $sample; ?></div>
			</div>
			<div class="row pt-1">
				<div class="col-md-2 text-right"><b>CLIENT:</b></div>
				<div class="col-md-3 text-left"><?php echo $client; ?></div>
				<div class="col-md-1"></div>
				<div class="col-md-3 text-right"><b>DATE SAMPLED:</b></div>
				<div class="col-md-3 text-left"><?php echo $sampleDate; ?></div>
			</div>
			<div class="row pt-1">
				<div class="col-md-2 text-right"><b>Address:</b></div>
				<div class="col-md-3 text-left"><?php echo $address; ?></div>
				<div class="col-md-1"></div>
				<div class="col-md-3 text-right"><b>Lab Number:</b></div>
				<div class="col-md-3 text-left"><?php echo $labNo; ?></div>
			</div>
			<div class="row pt-1">
				<div class="col-md-2 text-right"><b></b></div>
				<div class="col-md-3 text-left"><?php echo $state; ?></div>
				<div class="col-md-1"></div>
				<div class="col-md-3 text-right"><b>CROP:</b></div>
				<div class="col-md-3 text-left"><?php echo $crop; ?></div>
			</div>
			<div class="row pt-1">
				<div class="col-md-2 text-right"><b></b></div>
				<div class="col-md-3 text-left"><?php echo $email; ?></div>
				<div class="col-md-1"></div>
				<div class="col-md-3 text-right"><b></b></div>
				<div class="col-md-3 text-left"></div>
			</div>
			*/
            ?>

            <!-- Graph Button -->
            <div class="d-print-none">
                <div class="row p-2">
                    <div class="col">
                        [[!soilAnalysisGraphButton]]
                    </div>
                    <div class="col">
                        <div class="form-status-holder"></div>
                    </div>
                </div>
            </div>
            <!-- GRAPH BANNER -->

            <div class="row">
                <div class="col-md-12 text-center font-weight-bold h4">Soil Analysis Summary</div>
            </div>


            <!-- CHART HEADER  -->

            <div class="row bg-dark text-white p-2 mt-3">
                <div class="text-center col-md-12 h5">Total kilograms per hectare of each element needed to balance soil in this test</div>
            </div>

            <div class="row">
                <div class="">
                    [[!soilAnalysisReportCalcs? &symbol=`Ca` &element=`BS_ca_ppm` &min=`ca_ppm_min` &max=`ca_ppm_max` &nutrient=`Calcium` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`Mg` &element=`BS_mg_ppm`  &min=`mg_ppm_min` &max=`mg_ppm_max` &nutrient=`Magnesium` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`K`  &element=`BS_k_ppm`  &min=`k_ppm_min` &max=`k_ppm_max` &nutrient=`Potasium` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`Na` &element=`BS_na_ppm`  &min=`na_ppm_min` &max=`na_ppm_max` &nutrient=`Sodium` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`P`  &element=`p_colwell`  &min=`` &max=`` &nutrient=`Phosphate` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`S` &element=`s_morgan`  &min=`` &max=`` &nutrient=`Sulfur` &type=`kg &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`Mn` &element=`mn_dtpa`  &min=`` &max=`` &nutrient=`Manganese` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`Fe` &element=`fe_dtpa`  &min=`` &max=`` &nutrient=`Iron` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`Zn` &element=`zn_dtpa`  &min=`` &max=`` &nutrient=`Zinc` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`Cu` &element=`cu_dtpa`  &min=`` &max=`` &nutrient=`Copper` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`AmN` &element=`NH3_N`  &min=`` &max=`` &nutrient=`AmNitrogen` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`B` &element=`b_cacl2`  &min=`` &max=`` &nutrient=`Boron` &type=`kg` &class=`col`]]
                    [[!soilAnalysisReportCalcs? &symbol=`NN` &element=`NO3_N`  &min=`` &max=`` &nutrient=`NNitrogen` &type=`kg` &class=`col`]]
                </div>
            </div>

            <hr>

            <!-- **************** START OF FORM DATA **************** -->
            <form class="report-form" method="post">

                <input class="" hidden type="text" name="id" id="id" value="[[+modx.user.id]]" >

                <!-- **************** OVERVIEW SECTION **************** -->
                <div class="row bg-dark text-white p-2 mt-3">
                    <div class="text-center col-md-12 h5 ">Overview</div>
                </div>
                <div class="row">
                    <div class="col-md-12 p-0" >
                        <textarea class="form-control rounded-0" rows="5" id="overview" name="overview" ></textarea>
                    </div>
                </div>

                <hr>

                <div class="row bg-dark text-white p-2 mt-3">
                    <div class="text-center col-md-12 h5 ">Ideal Soil Balancing Program for One Season of a FIVE YEAR Plan</div>
                </div>

                <div class="">
                    [[!soilProgramCalcs? &symbol=`Ca` &element=`BS_ca_ppm` &min=`ca_ppm_min` &max=`ca_ppm_max` &nutrient=`Calcium` &type=`kg`]]
                    [[!soilProgramCalcs? &symbol=`Ca` &element=`BS_ca_ppm` &min=`ca_ppm_min` &max=`ca_ppm_max` &nutrient=`Calcium` &type=`kg`]]
                    [[!soilProgramCalcs? &symbol=`Ca` &element=`BS_ca_ppm` &min=`ca_ppm_min` &max=`ca_ppm_max` &nutrient=`Calcium` &type=`kg`]]
                    [[!soilProgramCalcs? &symbol=`Ca` &element=`BS_ca_ppm` &min=`ca_ppm_min` &max=`ca_ppm_max` &nutrient=`Calcium` &type=`kg`]]
                    [[!soilProgramCalcs? &symbol=`Ca` &element=`BS_ca_ppm` &min=`ca_ppm_min` &max=`ca_ppm_max` &nutrient=`Calcium` &type=`kg`]]
                </div> 

                <hr>

                <!-- **************** FOLIAR PROGRAM SECTION **************** -->
                <div class="row bg-dark text-white p-2 mt-3">
                    <div class="text-center col-md-12 h5" ><input type="text" class="text-center form-control-plaintext text-white border-dark bg-dark" name="header1" id="header1" value="Foliar Program"></div>
                </div>
                <div class="row">
                    <div class="col-md-12 p-0" >
                        <textarea class="form-control rounded-0" rows="5" id="foliar_Details" name="foliar_Details"></textarea>
                    </div>
                </div>

                <!-- **************** MICROBE PROGRAM SECTION **************** -->
                <div class="row bg-dark text-white p-2 mt-3">
                    <div class="text-center col-md-12 h5">Microbe Program</div>
                </div>
                <div class="row">
                    <div class="col-md-12 p-0" >
                        <textarea class="form-control rounded-0" rows="5" id="microbe_Program" name="microbe_Program" ></textarea>
                    </div>
                </div>

                <div class="row">
                    <p style="font-style: italic; font-size: 9px;">Any recommendations provided by Cropmonitor are advice only, We are not paid consultants and we are not covered to accept responsibiliy for any of our suggestions. As no control can be exercised over storage, handling, mixing application or use, or weather, plant or soil conditions before, during or after application (all of which may affect the preformance of our program), no responsibility for, or liability for any failure in performance, losses, damage or injuries consequential or otherwise, arisiing form such storage mixng application or use will be accepted under any circumstances whatsoever. The buyer assumes all responsibility for the use of any of our products.</p>
                </div>

            </form>
        </div>    



        <script type="text/javascript">
            $(document).ready(function(){
                var timeoutId;
                $('form textarea, form input').on('input propertychange change', function() {
                    console.log('Textarea Change');

                    clearTimeout(timeoutId);
                    timeoutId = setTimeout(function() {
                        // Runs 1 second (1000 ms) after the last change    
                        saveToDB();
                    }, 1000);
                });

                function saveToDB() {
                    console.log('Saving to the db');
                    form = $('.report-form');
                    $.ajax({
                        url: "[[~58]]",
                        type: "POST",
                        data: form.serialize(), // serializes the form's elements.
                        beforeSend: function(xhr) {
                            // Let them know we are saving
                            $('.form-status-holder').html('Saving...');
                        },
                        success: function(data) {
                            var jqObj = jQuery(data); // You can get data returned from your ajax call here. ex. jqObj.find('.returned-data').html()
                            // Now show them we saved and when we did
                            var d = new Date();
                            $('.form-status-holder').html('Saved! Last: ' + d.toLocaleTimeString());
                        },
                    });
                }

                // This is just so we don't go anywhere  
                // and still save if you submit the form
                $('.report-form').submit(function(e) {
                    saveToDB();
                    e.preventDefault();
                });
            });
        </script>

        </div>

    <!-- 
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=xcotawi18mg1imp8im144buq68h9g3ndd3c9c8215w8qu3ld"></script>
<script>
tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: 'bold italic  | alignleft aligncenter alignright alignjustify | bullist numlist | removeformat',
plugins: 'autosave',
autosave_interval: '20s'
});
</script>
-->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>	

    <script type="text/javascript">
        addEventListener("load", function() { 
            setTimeout(hideURLbar, 0);
        }, false);
        function hideURLbar(){ 
            window.scrollTo(0,1);
        }
    </script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

    <script>
        //https://github.com/eKoopmans/html2pdf.js
        $('.downloadPDF').click(function () {
            var element = document.getElementById('content'); //document.createElement("body");
            element.classList.remove('screen');
            element.classList.add('print');
            var opt = {
                margin:       3,
                filename:     'soil-analysis.pdf',
                image:        { type: 'jpeg', quality: 1.0 },
                html2canvas:  { scale: 2, letterRendering: true, windowWidth: 1024 },  //, windowWidth: 1024
                jsPDF:        { orientation: 'portrait', unit: 'mm', format: 'a4', putOnlyUsedFonts: true, floatPrecision: 'smart', }
            };
            html2pdf()
                .from(element)
                .toPdf()
                .set(opt)
                .save()
                .then(function(){
                element.classList.remove('print');
                element.classList.add('screen');
            });

        });
    </script>
    </body>
</html>